jQuery AJAX Pagination in PHP Without Page Refresh Example

Rate this post

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.

Free Live Chat for Any Issue
  • index.php
  • pagination.php
  • database.php

Also Best ajax pagination in php Examples

Read Also:  Get last inserted ID laravel 5.7 Examples

Step: 1 Data List with Ajax Pagination

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.

$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">
<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>
    <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 id="target-content">loading...</div>
            <div class="clearfix">
                    <ul class="pagination">
                        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>
                                <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>
    $(document).ready(function() {
            var id = $(this).attr("data-id");
            var select_id = $(this).parent().attr("id");
                url: "pagination.php",
                type: "GET",
                data: {
                    page : id
                cache: false,
                success: function(dataResult){

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.
Read Also:  Nodejs Login and Registration with PHP MySQL and SQLite Example

$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">  
<th>product desc</th>  
while ($row = mysqli_fetch_array($rs_result)) {  
            <td><?php echo $row["name"]; ?></td>  
            <td><?php echo $row["product_desc"]; ?></td>  

Step: 3 Database Configuration

create a simple database.php

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

Read :

Read Also:  Top 40 Laravel Interview Questions


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.