The pagination feature is limiting the number of results instead of loading everything to a listing page. Loading more records with pagination will increase the efficiency of loading page results per page. We have seen a few examples of PHP pagination with data results. For pagination operations, the number of perpage results will be calculated. This configured number will be used in query to set the limit. Ajax Pagination helps to create pagination links and load data without page refresh.

Here we are using 3 file for Ajax Pagination helps to create pagination links and load data without page refresh.

  1. #database.php
  2. #index.php
  3. #pagination.php


Database Script for user_data Table

Import a user_data table to use this example locally. 

CREATE TABLE `user_data` (
  `id` int(11) NOT NULL,
  `username` varchar(100) NOT NULL,
  `password` varchar(250) NOT NULL,
  `email` varchar(50) NOT NULL,
  `phone` varchar(100) NOT NULL,
  `city` varchar(50) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;


#database.php

<?php

$servername = "localhost";
$username = "root";
$password = "";
$db = "tutorial";
$conn = mysqli_connect($servername, $username, $password, $db);
?>

#index.php

<?php
include('database.php');
$limit = 4;
$sql = "SELECT COUNT(id) FROM user_data";
$rs_result = mysqli_query($conn, $sql);
$row = mysqli_fetch_row($rs_result);
$total_records = $row[0];
$total_pages = ceil($total_records / $limit);
?>
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>PHP Pagination AJAX</title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <head>
    <body>
        <div class="container">
            <div class="table-wrapper">
                <div class="table-title">
                    <div class="row">
                        <div class="col-sm-6">
                            <h4>Pagination Example</h4>
     				
                        </div>
                    </div>
                </div>
                <div id="target-content">loading...</div>

                <div class="clearfix">

                    <ul class="pagination">
                        <?php
                        if (!empty($total_pages)) {
                            for ($i = 1; $i <= $total_pages; $i++) {
                                if ($i == 1) {
                                    ?>
                                    <li class="pageitem active" id="<?php echo $i; ?>"><a href="JavaScript:Void(0);" data-id="<?php echo $i; ?>" class="page-link" ><?php echo $i; ?></a></li>

                                    <?php
                                } else {
                                    ?>
                                    <li class="pageitem" id="<?php echo $i; ?>"><a href="JavaScript:Void(0);" class="page-link" data-id="<?php echo $i; ?>"><?php echo $i; ?></a></li>
                                        <?php
                                    }
                                }
                            }
                            ?>
                    </ul>
                    </ul>
                </div>
            </div>
        </div>
        <script>
            $(document).ready(function() {
                $("#target-content").load("pagination.php?page=1");
                $(".page-link").click(function() {
                    var id = $(this).attr("data-id");
                    var select_id = $(this).parent().attr("id");
                    $.ajax({
                        url: "pagination.php",
                        type: "GET",
                        data: {
                            page: id
                        },
                        cache: false,
                        success: function(dataResult) {
                            $("#target-content").html(dataResult);
                            $(".pageitem").removeClass("active");
                            $("#" + select_id).addClass("active");

                        }
                    });
                });
            });
        </script>
    </body>
</html>


#pagination.php

<?php
include('database.php');
$limit = 5;
if (isset($_GET["page"])) {
    $page = $_GET["page"];
} else {
    $page = 1;
};
$start_from = ($page - 1) * $limit;

$sql = "SELECT * FROM user_data ORDER BY name ASC LIMIT $start_from, $limit";
$rs_result = mysqli_query($conn, $sql);
?>
<table class="table table-bordered table-striped">  
    <thead>  
        <tr>  
            <th>Name</th>  
            <th>Email</th>  
        </tr>  
    </thead>  
    <tbody>  
<?php
while ($row = mysqli_fetch_array($rs_result)) {
    ?>  
            <tr>  
                <td><?php echo $row["name"]; ?></td>  
                <td><?php echo $row["email"]; ?></td>  
            </tr>  
    <?php
};
?>  
    </tbody>  
</table>    

Run the following code and see the results

output:




Download source code

Are you facing problems in understanding this article? download source code now