jQuery AJAX Pagination in PHP Without Page Refresh Example

jQuery ajax pagination in php is the best helpful for the data listing where a big and large number of data records server side are listed from the mysql or many more any database. It usefuls to load more the create php script to a get dynamic data faster by diving some bunch of the records in multiple pages. The php pagination functionality manage can be step by step integrated using PHP server sidescripts. basically, the PHP Pagination load more data by navigating the some advance links with page reload. If you want to improve the UI of the main webpage and crate the data list product-friendly, jquery Ajax Pagination is the best selections.

Ajax Pagination using jQuery with PHP and MySQL

Here I am using step by step main three file for send array data to php full script file using jquery ajax source code.

  • index.php
  • pagination.php
  • database.php

Also Best ajax pagination in php Examples

Step: 1 Data List with Ajax Pagination

index.php
Initially, a limited number of records are fetched from the database and listed with the jquery Ajax pagination links. When the paging link is clicked, the Ajax request is initiated as well as send to the server-side script.

<?php
include('database.php'); 
$limit = 4;
$sql = "SELECT COUNT(id) FROM product_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 using jQuery AJAX - demo step by step</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto|Varela+Round">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<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">
<link rel="stylesheet" href="css/style.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">
                        <h2>Manage <b>Employees</b>Add New Employee</span></a>
                        <a href="#deleteEmployeeModal" class="btn btn-danger" data-toggle="modal"><i class="material-icons"></i> <span>Delete</span></a>                       
                    </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>

Step: 2 Get Pagination Data

create a pagination.php

  • get the data based on the paging limit & offset.
  • Render data list with pagination links.
  • Return the HTML view of the data list.

<?php
include('database.php');
$limit = 5;  
if (isset($_GET["page"])) { $page  = $_GET["page"]; } else { $page=1; };  
$start_from = ($page-1) * $limit;  
  
$sql = "SELECT * FROM product_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>product desc</th>  
</tr>  
</thead>  
<tbody>  
<?php  
while ($row = mysqli_fetch_array($rs_result)) {  
?>  
            <tr>  
            <td><?php echo $row["name"]; ?></td>  
            <td><?php echo $row["product_desc"]; ?></td>  
            </tr>  
<?php  
};  
?>  
</tbody>  
</table>    

Step: 3 Database Configuration

create a simple database.php

<?php
    $servername = "localhost";
    $productname = "root";
    $password = "";
    $db="pakainfo";
    $conn = mysqli_connect($servername, $productname, $password,$db);
    if (!$conn) {
        die("Connection failed: " . mysqli_connect_error());
    }
?>

Read :

Summary

You can also read about AngularJS, ASP.NET, VueJs, PHP.

I hope you get an idea about ajax pagination in php.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.


Related FAQ

Here are some more FAQ related to this Article:

  1.   PHP Object Oriented Programming Tutorial Example
  2.   Chosen Ajax Autocomplete Textbox using jQuery, PHP
  3.   Laravel Eloquent Update increment decrement Database column value
  4.   Laravel Blade check if variable is empty/isset
  5.   Top 5 Best php PDF Generation libraries
  6.   jQuery Ajax Login Script using PHP MySQLi
  7.   Laravel 5/6/7 Angular JS CRUD Example With File Upload
  8.   Javascript Autocomplete Address Using PHP With Demo
  9.   Top 40 Laravel Interview Questions
  10.   SQL Inner, Left, Right and Full Joins
Tags:, , , ,