How to make PHP numeric Pagination

Pagination is a technique to break and display the large list of content in the smaller parts. This reduces your page load time and it is user-friendly.

There are multiple types of pagination available some are –

In this tutorial, I show How you can add numeric pagination to your web page.

How to make PHP numeric pagination


Contents

  1. Table structure
  2. Configuration
  3. HTML and PHP
  4. CSS
  5. Conclusion

 

1. Table structure

I am using employee table.

CREATE TABLE `employee` (
  `id` int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT,
  `emp_name` varchar(80) NOT NULL,
  'salary' varchar(20) NOT NULL,
  'gender' varchar(10) NOT NULL,
  'email' varchar(70) NOT NULL,
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

 

2. Configuration

Create a new config.php file.

Completed Code

<?php

$host = "localhost";    /* Host name */
$user = "root";         /* User */
$password = "";         /* Password */
$dbname = "tutorial";   /* Database name */

$con = mysql_connect($host, $user, $password) or die("Unable to connect");

// selecting database
$db = mysql_select_db($dbname, $con) or die("Database not found");

3. HTML and PHP

Now displaying content from the MySQL table and add pagination.

  • I set the maximum number of rows to display at a time to 5 which you change by editing –
$rowperpage = 5; // Total rows display
  • If $_GET['page'] is set then update the $row value which we use in SELECT query LIMIT.
  • Counting the total number of rows and fetch data from MySQL table.
  • Now creating a unordered list for numeric pagination which displays page number where I set the maximum page numbers to display at a time too 5.
// Total number list show
$numpages = 5;
  • Create <li> which contains page numbers by looping and break the loop when remainder equals to 0.
if($i%($numpages+1) == 0){
 break;
}

Completed Code

<div id="content">
 <?php
 include("config.php");

 $rowperpage = 5; // Total rows display
 
 $row = 0;
 if(isset($_GET['page'])){
  $row = $_GET['page']-1;
  if($row < 0){
   $row = 0;
  }
 }

 // count total number of rows
 $sql = "SELECT COUNT(*) AS cntrows FROM employee";
 $result = mysql_query($sql);
 $fetchresult = mysql_fetch_array($result);
 $allcount = $fetchresult['cntrows'];
 ?>

 <table width="100%" id="emp_table" border="1" >
  <tr class="tr_header">
   <th>S.no</th>
   <th>Name</th>
   <th>Salary</th>
  </tr>
  <?php

  // selecting rows
  $limitrow = $row*$rowperpage;
  $sql = "SELECT * FROM employee ORDER BY ID ASC limit $limitrow,".$rowperpage;
  $result = mysql_query($sql);

  /////////////
  $sno = $row + 1;
  if(isset($_GET['page'])){
   $sno = (($_GET['page']*$rowperpage)+1) - $rowperpage;
   if($sno <=0) $sno = 1;
  }
  while($fetch = mysql_fetch_array($result)){
   $name = $fetch['emp_name'];
   $salary = $fetch['salary'];
  ?>
   <tr>
    <td align='center'><?php echo $sno; ?></td>
    <td align='center'><?php echo $name; ?></td>
    <td align='center'><?php echo $salary; ?></td>
   </tr>
  <?php
   $sno ++;
  }
  ?>
 </table>


 <!-- Number list (start) -->
 <ul class="pagination">
 
 <?php
 // calculate total pages
 $total_pages = ceil($allcount / $rowperpage);

 $i = 1;$prev = 0;

 // Total number list show
 $numpages = 5;

 // Set previous page number and start page 
 if(isset($_GET['next'])){
  $i = $_GET['next']+1;
  $prev = $_GET['next'] - ($numpages);
 }

 if($prev <= 0) $prev = 1;
 if($i == 0) $i=1;

 // Previous button next page number
 
 $prevnext = 0;
 if(isset($_GET['next'])){
  $prevnext = ($_GET['next'])-($numpages+1);
  if($prevnext < 0){
   $prevnext = 0;
  }
 }
 
 // Previous Button
 echo '<li ><a href="?page='.$prev.'&next='.$prevnext.'">Previous</a></li>';
 
 if($i != 1){
  echo '<li ><a href="?page='.($i-1).'&next='.$_GET['next'].'" '; 
  if( ($i-1) == $_GET['page'] ){
   echo ' class="active" ';
  }
  echo ' >'.($i-1).'</a></li>';
 }
 
 // Number List
 for ($shownum = 0; $i<=$total_pages; $i++,$shownum++) {
  if($i%($numpages+1) == 0){
   break;
  }
 
  if(isset($_GET['next'])){ 
   echo "<li><a href='?page=".$i."&next=".$_GET['next']."'";
  }else{
   echo "<li><a href='?page=".$i."'";
  }
 
  // Active
  if(isset($_GET['page'])){
   if ($i==$_GET['page']) 
    echo " class='active'";
   }
   echo ">".$i."</a></li> ";
  }

  // Set next button
  $next = $i+$rowperpage;
  if(($next*$rowperpage) > $allcount){
   $next = ($next-$rowperpage)*$rowperpage;
  }

  // Next Button
  if( ($next-$rowperpage) < $allcount ){ 
   if($shownum == ($numpages)){
    echo '<li ><a href="?page='.$i.'&next='.$i.'">Next</a></li>';
   }
  }
 
  ?>
 </ul>
 <!-- Numbered List (end) -->
</div>

4. CSS

Adding some CSS to the unordered list.

Completed Code

/* Numeric */
.pagination{
 list-style: none;
}
.pagination li{
 float: left;
 border: 1px solid #000;
 padding: 5px 7px;
 margin-right: 10px;
 border-radius: 3px;
}
.pagination li a{
 text-decoration: none;
 color:black;
}

.active{
 color: red !important;
}

5. Conclusion

I hope this tutorial, helps and explains you the addition of numeric pagination to the web page.

Spread the love

Related Post

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *