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.

Select Code
1
2
3
4
5
6
7
8
<?php
$dbhost = 'localhost';  
$dbuser = 'root';  
$dbpass = "";  
$conn = mysql_connect($dbhost, $dbuser, $dbpass) or die ('Error connecting to mysql');  
$dbname = 'test';  
$connection = mysql_select_db($dbname); 
?>

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

Select Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" id="font-awesome-style-css" href="http://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 = mysql_query($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.

Select Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<?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 = mysql_query ($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 domo and download source code from below link,

  • Subhendu Roy

    Where is db.php

    • in downloaded zip file, there is posts.sql and dp.php file

  • Subhendu Roy

    Can you give the database in .sql format.

  • Muneesh Pandi

    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

    • what was error you are getting on server?

      • Muneesh Pandi

        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”;

      • Muneesh Pandi

        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 add these buttons using PHP logic

          • Muneesh Pandi

            Ok thanks for ur response.. i will try these buttons in php.

            one more request, can u post remote method to check username availabilty? Thanks in advance.

          • Thanks muneesh, i will post soon.

          • Muneesh Pandi

            Thank u so much!

  • shree

    I want two id pass on next page, How can i do this ?

  • have u connected mysql db and using right table.Please send code if still getting error on phpflow@gmail.com.I ll try my best to solve ur issue.

  • can pls recheck db name