Simple Ajax Pagination with PHP

In previous tutorial we have learn Simple tutorial of pagination in php, here we will learn php pagination with ajax.now days we are using ajax functionality for each request.We are using jQuery library for Ajax request and MySQL for database.

We have following files:
1- db.php : This file contains db connection information.
2- pagination.php : this file return html table as a response.
3- index.php :This file is used as a requester.

Checkout other tutorials of pagination,

To create Ajax pagination we need to follow below steps:

Step 1:Create db.php and put below connection code in this file.

 $servername = "localhost";
    $username = "root";
    $password = "";
    $dbname = "test";

    $conn = mysqli_connect($servername, $username, $password, $dbname) or die("Connection failed: " . mysqli_connect_error());
    /* check connection */
    if (mysqli_connect_errno()) {
        printf("Connect failed: %s\n", mysqli_connect_error());
        exit();
    }

Step 2:Created index.php file and putted below code into this file.

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" id="font-awesome-style-css" href="https://phpflow.com/code/css/bootstrap3.min.css" type="text/css" media="all">
<!-- jQuery -->
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"></script>
<title>phpflow.com : Source code of simaple ajax pagination</title>
</head>
<body>
<div><h3>Source code : PHP simaple ajax pagination</h1></div>
<div>
<div id="target-content" >loading...</div>

<?php
include('db.php'); 
$limit = 2;
$sql = "SELECT COUNT(id) FROM posts";  
$rs_result = mysqli_query($conn, $sql);  
$row = mysql_fetch_row($rs_result);  
$total_records = $row[0];  
$total_pages = ceil($total_records / $limit); 
?>
<div align="center">
<ul class='pagination text-center' id="pagination">
<?php if(!empty($total_pages)):for($i=1; $i<=$total_pages; $i++):  
			if($i == 1):?>
            <li class='active'  id="<?php echo $i;?>"><a href='pagination.php?page=<?php echo $i;?>'><?php echo $i;?></a></li> 
			<?php else:?>
			<li id="<?php echo $i;?>"><a href='pagination.php?page=<?php echo $i;?>'><?php echo $i;?></a></li>
		<?php endif;?>			
<?php endfor;endif;?>  
</div>
</div>
</body>
<script>
jQuery(document).ready(function() {
jQuery("#target-content").load("pagination.php?page=1");
    jQuery("#pagination li").live('click',function(e){
	e.preventDefault();
		jQuery("#target-content").html('loading...');
		jQuery("#pagination li").removeClass('active');
		jQuery(this).addClass('active');
        var pageNum = this.id;
        jQuery("#target-content").load("pagination.php?page=" + pageNum);
    });
    });
</script>

Step 3:Created pagination.php and putted below code into this file.

<?php
include('db.php');

$limit = 2;  
if (isset($_GET["page"])) { $page  = $_GET["page"]; } else { $page=1; };  
$start_from = ($page-1) * $limit;  
  
$sql = "SELECT * FROM posts ORDER BY title ASC LIMIT $start_from, $limit";  
$rs_result = mysqli_query($conn, $sql);  
?>
<table class="table table-bordered table-striped">  
<thead>  
<tr>  
<th>title</th>  
<th>body</th>  
</tr>  
</thead>  
<tbody>  
<?php  
while ($row = mysql_fetch_assoc($rs_result)) {  
?>  
            <tr>  
            <td><? echo $row["title"]; ?></td>  
            <td><? echo $row["body"]; ?></td>  
            </tr>  
<?php  
};  
?>  
</tbody>  
</table>    

Result :

ajax-pagination-php

You can check live demo and download source code from below link,

18 thoughts on “Simple Ajax Pagination with PHP

  1. Hi, very useful tutorial.. this jquery load function was not working on server..but its working perfect on local server only .. can u say any other solution? thanks in advance

      • Hi, now its working fine..im using urs Advanced AJAX Pagination with PHP and Mysql script. if i use where condition on pagination page, it doesn’t work. i don’t know, how to pass table id?… can u help me..
        @ pagination page:- $sql = “select * from review where advertiserid=’$aid’ order by reviewid desc LIMIT $start_from, $limit”;

      • Hi, i solved this problem, now its working perfect. i had added table id into script
        jQuery(“#target-content”).load(“pagination.php?aid=&page=” + pageNumber );
        can u say?.. this pagination have prev & next button only, how can i show the first & last button?

        i had tried in php but its doesn’t show these buttons

    • you can get elp from advanced pagination tut, https://phpflow.com/php/advanced-ajax-pagination-phpmysql-using-jquery/

Leave a Reply

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