How to create Pagination with PHP

Pagination helps us to split the large list of records into multiple parts. This improves the UI and page load faster.

It limits the number of records visible to the user and requires to navigate through pagination control to view another list.

In this tutorial, I show how you can simply create pagination with HTML, CSS, and PHP.

How to create Pagination with PHP


Contents

  1. Configuration
  2. HTML & PHP
  3. CSS
  4. Conclusion

 


 

1. Configuration

Create a new config.php file to establish the connection to MySQL database.

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");

2. HTML & PHP

Create a table layout to show the employee list.

Count the total number of records in employee table and to select the specific number of records uses LIMIT with SELECT query.

NOTE – Set the maximum number of row selection to 5 ($rowperpage=5).

Created two hidden fields that store current row position and the total number of records. The button elements for Previous and Next navigation.

Previous Button click –

Select current row position and subtract it by $rowperpage.

Next Button click – 

Select current row position and the total number of records value. Add $rowperpage with current row position if it less than $allcount.

Complete Code

<!doctype html>
<html>
    <head>
        <link href="style.css" type="text/css" rel="stylesheet">
        <?php
            include("config.php");

            $rowperpage = 5;
            $row = 0;

            // Previous Button
            if(isset($_POST['but_prev'])){
                $row = $_POST['row'];
                $row -= $rowperpage;
                if( $row < 0 ){
                    $row = 0;
                }
            }

            // Next Button
            if(isset($_POST['but_next'])){
                $row = $_POST['row'];
                $allcount = $_POST['allcount'];

                $val = $row + $rowperpage;
                if( $val < $allcount ){
                    $row = $val;
                }
            }
        ?>
    </head>
    <body>
    <div id="content">
        <table width="100%" id="emp_table" border="0">
            <tr class="tr_header">
                <th>S.no</th>
                <th>Name</th>
                <th>Salary</th>
            </tr>
            <?php
            // count total number of rows
            $sql = "SELECT COUNT(*) AS cntrows FROM employee";
            $result = mysql_query($sql);
            $fetchresult = mysql_fetch_array($result);
            $allcount = $fetchresult['cntrows'];

            // selecting rows
            $sql = "SELECT * FROM employee  ORDER BY ID ASC limit $row,".$rowperpage;
            $result = mysql_query($sql);
            $sno = $row + 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>
        <form method="post" action="">
            <div id="div_pagination">
                <input type="hidden" name="row" value="<?php echo $row; ?>">
                <input type="hidden" name="allcount" value="<?php echo $allcount; ?>">
                <input type="submit" class="button" name="but_prev" value="Previous">
                <input type="submit" class="button" name="but_next" value="Next">
            </div>
        </form>
    </div>
    </body>
</html>

3. CSS

.container{
 border:1px solid darkgrey;
 border-radius:3px;
 padding:5px;
 width: 60%;
 margin: 0 auto;
}

/* Table */
#emp_table {
 border:3px solid lavender;
 border-radius:3px;
}

/* Table header */
.tr_header{
 background-color:dodgerblue;
}
.tr_header th{
 color:white;
 padding:10px 0px;
 letter-spacing: 1px;
}

/* Table rows and columns */
#emp_table td{
 padding:10px;
}
#emp_table tr:nth-child(even){
 background-color:lavender;
 color:black;
}

/* */
#div_pagination{
 width:100%;
 margin-top:5px;
 text-align:center;
}

.button{
 border-radius:3px;
 border:0px;
 background-color:mediumpurple;
 color:white;
 padding:10px 20px;
 letter-spacing: 1px;
}

.divnum_rows{
 display: inline-block;
 text-align: right;
 width: 30%;
}

4. Conclusion

When you have the huge number of records and wants to show all on the web page then use pagination to split it in the number of pages.

To make easier for the users to navigate add search control to filter the list.

Spread the love

Related Post

Be First to Comment

Leave a Reply

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