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
Read Also:  how to get last inserted id in laravel 6

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.
Read Also:  laravel soft delete relationship Eloquent ORM

<?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 :

Read Also:  Laravel 7 User Login Authentication From Scratch

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.

About Pakainfo

I am Jaydeep Gondaliya, a software engineer, the founder and the person running Pakainfo. I'm a full-stack developer, entrepreneur and owner of Pakainfo.com. I live in India and I love to write tutorials and tips that can help to other artisan, a Passionate Blogger, who love to share the informative content on PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.

View all posts by Pakainfo →

Leave a Reply

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