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 –

• Previous and Next
• Load More
• Numeric

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

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.