How to Create a Page Navigation (Pagination) using PHP/MySQL with Twitter Bootstrap

Submitted by GeePee on Tuesday, April 14, 2015 - 23:03.
In this tutorial, I'm going to show you how to create a simple Page Navigator or a Pagination using PHP and MySQL Database with Twitter bootstrap. If you are a web developer or you want to learn about programming, it is very important to know about Pagination with PHP and MySQL. Using the pagination with PHP, it allows you to paging the data into number of pages. To start with this application, first we need to set up our framework and file directories. This time, you need to download bootstrap framework. Then extract it and copy the three folders such as: css,fonts and js and paste it inside pagination folder located at the local server. Here’s the folder structure: pagination/ ├── css/ │ ├── bootstrap.css │ ├── bootstrap.min.css │ ├── bootstrap-theme.css │ ├── bootstrap-theme.min.css ├── js/ │ ├── bootstrap.js │ ├── bootstrap.min.js └── fonts/ ├── glyphicons-halflings-regular.eot ├── glyphicons-halflings-regular.svg ├── glyphicons-halflings-regular.ttf └── glyphicons-halflings-regular.woff Next, here’s the MySQL table structure used in this application.
  1. CREATE TABLE IF NOT EXISTS `employees` (
  2.   `EMPLOYEE_ID` INT(11) NOT NULL,
  3.   `FIRST_NAME` VARCHAR(255) DEFAULT NULL,
  4.   `LAST_NAME` VARCHAR(255) DEFAULT NULL,
  5.   `EMAIL` VARCHAR(255) DEFAULT NULL,
  6.   `PHONE_NUMBER` VARCHAR(255) DEFAULT NULL,
  7.   `HIRE_DATE` datetime DEFAULT NULL,
  8.   `JOB_ID` VARCHAR(255) DEFAULT NULL,
  9.   `SALARY` INT(11) DEFAULT NULL,
  10.   `COMMISSION_ID` INT(11) DEFAULT NULL,
  11.   `MANAGER_ID` INT(11) DEFAULT NULL,
  12.   `DEPARTMENT_ID` INT(11) DEFAULT NULL,
  13.   PRIMARY KEY (`EMPLOYEE_ID`),
  14.   KEY `COMMISSION_ID` (`COMMISSION_ID`),
  15.   KEY `DEPARTMENT_ID` (`DEPARTMENT_ID`),
  16.   KEY `JOB_ID` (`JOB_ID`),
  17.   KEY `MANAGER_ID` (`MANAGER_ID`)
  18. ) ENGINE=MyISAM DEFAULT CHARSET=utf8;
  19.  
  20. --
  21. -- Dumping data for table `employees`
  22. --
  23.  
  24. INSERT INTO `employees` (`EMPLOYEE_ID`, `FIRST_NAME`, `LAST_NAME`, `EMAIL`, `PHONE_NUMBER`, `HIRE_DATE`, `JOB_ID`, `SALARY`, `COMMISSION_ID`, `MANAGER_ID`, `DEPARTMENT_ID`) VALUES
  25. (100, 'steven', 'King', 'sKing', '213-231-2313', '1987-06-17 00:00:00', 'AD_PRESS', 24000, NULL, 100, 90),
  26. (101, 'neena', 'Kochar', 'nKochar', '123-1231-212', '1989-09-21 00:00:00', 'AD_VP', 17000, NULL, 100, 90),
  27. (102, 'lex', 'De Haan', 'lDe Haan', '113-2122-2121', '1990-01-13 00:00:00', 'AD_VP', 17000, NULL, 100, 90),
  28. (103, 'alexander', 'Hunold', 'aHunold', '211-4515-1515', '1991-05-21 00:00:00', 'IT_PROG', 9000, NULL, 102, 60),
  29. (104, 'Bruce', 'Ernst', 'bErnst', '515-541-151', '1999-07-02 00:00:00', 'IT_PROG', 6000, NULL, 103, 60),
  30. (107, 'Diana', 'Lorents', 'dLorents', '515-515-5156', '1999-11-16 00:00:00', 'IT_PROG', 4200, NULL, 103, 60),
  31. (124, 'Kevin', 'Mourgos', 'kMourgos', '559-887-333', '1995-10-17 00:00:00', 'IT_PROG', 5800, NULL, 100, 50),
  32. (141, 'Trenne', 'Rajs', 'tRajs', '212-548-989', '1997-01-29 00:00:00', 'ST_MAN', 3500, NULL, 124, 50),
  33. (142, 'Curtis', 'Davies', 'cDavies', '333-999-777', '1998-03-15 00:00:00', 'ST_CLERK', 3100, NULL, 124, 50),
  34. (143, 'Randal', 'Matos', 'rMatos', '4444-5654-54', '1998-09-07 00:00:00', 'ST_CLERK', 2600, NULL, 124, 50),
  35. (144, 'Peter', 'Vargas', 'pVargas', '6565-5641-87', '2000-01-10 00:00:00', 'ST_CLERK', 2500, NULL, 124, 50),
  36. (149, 'Ellen', 'Zlotkey', 'eZlotkey', '656-4847-45', '1996-11-05 00:00:00', 'ST_CLERK', 10500, NULL, 100, 50),
  37. (174, 'Jonathan', 'Abel', 'jAbel', '5988-4556-564', '1999-05-24 00:00:00', 'SA_MAN', 11000, 0, 100, 80),
  38. (176, 'Kimberly', 'Taylor', 'kTaylor', '687-695-8754', '1987-09-17 00:00:00', 'SA_REP', 8600, 0, 149, 80),
  39. (178, 'Jinnefer', 'Grant', 'jGrant', '552-6541-897', '1996-02-17 00:00:00', 'SA_REP', 7000, 0, 149, 80),
  40. (200, 'Michael', 'Whalen', 'mWhalen', '2121-5465-541', '1997-08-17 00:00:00', 'SA_REP', 4400, 0, 149, NULL),
  41. (201, 'Pat', 'Hartstein', 'pHartstein', '14564-541-45', '1994-07-07 00:00:00', 'AD_ASST', 13000, NULL, 101, 10),
  42. (205, 'Shelley', 'Fay', 'sFay', '515-215-1156', '1994-07-07 00:00:00', 'MK_MAN', 6000, NULL, 100, 20),
  43. (206, 'William', 'Higgins', 'wHiggins', '566-112-5156', '1995-09-26 00:00:00', 'AC_MGR', 12000, NULL, 201, 20),
  44. (207, 'hatch', 'Glets', 'hGlets', '556-5465-515', '1989-03-07 00:00:00', 'AC_ACCOUNT', 8300, NULL, 101, 110);
Next step, create a PHP file and save it as “paging.php”. And add the following code.
  1. <!DOCTYPE html>
  2.  
  3. <html lang="en">
  4. <head>
  5.         <meta charset="utf-8">
  6.         <meta content="width=device-width, initial-scale=1.0" name="viewport">
  7.         <meta content="" name="description">
  8.         <meta content="" name="author">
  9.         <link href="" rel="shortcut icon">
  10.  
  11.         <title>Pagination</title><!-- Bootstrap core CSS -->
  12.         <link href="css/bootstrap.css" rel="stylesheet">
  13.         <link href="css/bootstrap-responsive.css" rel="stylesheet">
  14. </head>
  15.  
  16. <body>
  17.         <div class="container">
  18.                 <div class="well">
  19.                         <h2>Page Navigation</h2>
  20.                 </div>
  21.  
  22.                 <div class="well">
  23.                         <table class="table table-condensed">
  24.                         <!--we create here table heading-->
  25.                                 <thead>
  26.                                         <tr>
  27.                                                 <th>Employee ID</th>
  28.                                                 <th>Last Name</th>
  29.                                                 <th>First Name</th>
  30.                                                 <th>Email</th>
  31.                                                 <th>Salary</th>
  32.                                         </tr>
  33.                                 </thead>
  34.  
  35.                                 <tbody>
  36.                                         <?php
  37.                                         //set up mysql connection
  38.                                         $dbhost    = 'localhost';
  39.                                         $dbuser    = 'root';
  40.                                         $dbpass    = '';
  41.                                         //number of results to show per page
  42.                                         $rec_limit = 3;
  43.                                
  44.                                         $conn = mysql_connect($dbhost, $dbuser, $dbpass);
  45.                                         if (!$conn) {
  46.                                                 die('Could not connect: ' . mysql_error());
  47.                                         }
  48.                                         //select database
  49.                                         mysql_select_db('oracledbm');
  50.                                         /* Get total number of records */
  51.                                         $sql    = "SELECT count(employee_id) FROM employees ";
  52.                                         $retval = mysql_query($sql, $conn);
  53.                                         if (!$retval) {
  54.                                                 die('Could not get data: ' . mysql_error());
  55.                                         }
  56.                                        
  57.                                         $row       = mysql_fetch_array($retval, MYSQL_NUM);
  58.                                         $rec_count = $row[0];
  59.  
  60.                                         if (isset($_GET{'page'})) { //get the current page
  61.                                                 $page   = $_GET{'page'} + 1;
  62.                                                 $offset = $rec_limit * $page;
  63.                                         } else {
  64.                                         // show first set of results
  65.                                                 $page   = 0;
  66.                                                 $offset = 0;
  67.                                         }
  68.                                         $left_rec = $rec_count - ($page * $rec_limit);
  69.                                         //we set the specific query to display in the table
  70.                                         $sql = "SELECT employee_id, LAST_NAME, FIRST_NAME, EMAIL, salary " . "FROM employees " . "LIMIT $offset, $rec_limit";
  71.  
  72.                                         $retval = mysql_query($sql, $conn);
  73.                                         if (!$retval) {
  74.                                                 die('Could not get data: ' . mysql_error());
  75.                                         }
  76.                                         //we loop through each records
  77.                                         while ($row = mysql_fetch_array($retval, MYSQL_ASSOC)) {
  78.                                        
  79.                                                 //populate and display results data in each row
  80.                                                 echo '<tr>';
  81.                                                 echo '<td>' . $row['employee_id'] . '</td>';
  82.                                                 echo '<td>' . $row['LAST_NAME'] . '</td>';
  83.                                                 echo '<td>' . $row['FIRST_NAME'] . '</td>';
  84.                                                 echo '<td>' . $row['EMAIL'] . '</td>';
  85.                                                 echo '<td>' . $row['salary'] . '</td>';
  86.                                                
  87.                                         }
  88.  
  89.                                         echo '</tr>';
  90.                                         echo '</tbody>';
  91.                                         echo '</table>';
  92.                                         //we display here the pagination
  93.                                         echo '<ul class="pager">';
  94.                                         if ($left_rec < $rec_limit) {
  95.                                                 $last = $page - 2;
  96.                                                 echo @"<li><a href=\"$_PHP_SELF?page=$last\">Previous</a></li>";
  97.                                         } else if ($page == 0) {
  98.                                                 echo @"<li><a href=\"$_PHP_SELF?page=$page\"> <li>Next</a></li>";
  99.                                         } else if ($page > 0) {
  100.                                                 $last = $page - 2;
  101.                                                 echo @"<li><a href=\"$_PHP_SELF?page=$last\">Previous</a></li> ";
  102.                                                 echo @"<li><a href=\"$_PHP_SELF?page=$page\">Next</a></li>";
  103.                                         }
  104.                                         echo '</ul>';
  105.                                         mysql_close($conn);
  106.                                         ?>
  107.                                 </tbody>
  108.                         </table>
  109.                 </div>
  110.         </div>
  111. </body>
  112. </html>
Then we will test it. The output should look like in the illustration below. pagination And here’s some classes we used in this application.
  1. class="container"
  2. class="well"
  3. class="table table-condensed"
  4. class="pager"
Tags
PAGINATION
paging
PHP/MySQL
Twitter Bootstrap

Comments

Submitted by Gustavo Morejon (not verified) on Thu, 03/03/2016 - 05:03

Excellent posting ... I've been trying all morning to correct a page that wasn't working and this code helped me a lot.

Submitted by nuhum (not verified) on Tue, 11/08/2016 - 03:54

just you is best for all website share paginat,,ty so much

Add new comment

About text formats