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,
- Simple Ajax Pagination with PHP
- Simple tutorial of pagination in php
- Simple Pagination with PHP and MySQl Using jQuery
- Advanced Ajax Pagination PHP,MySQL Using jQuery
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 :
You can check live demo and download source code from below link,
Where is db.php
in downloaded zip file, there is posts.sql and dp.php file
Can you give the database in .sql format.
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?
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 add these buttons using PHP logic
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.
Thank u so much!
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 [email protected] ll try my best to solve ur issue.
can pls recheck db name
This is the code i use to connect the database
$dbname = ‘test’;
looking good so i need to test code,can u plz send code on phpflow gmail.
Hi.How can i reduce page numbers?
and can i display only next and prev button?
you can get elp from advanced pagination tut, https://phpflow.com/php/advanced-ajax-pagination-phpmysql-using-jquery/