Long days back I had posted an article Pagination with jQuery, MySQL and PHP with out refreshing page. Ravi Tamada modified old script and added extra features like First, Previous, Next and Last buttons. Use it and enrich your web applications. Demo link
Download Script 
Live DemoAbout Author
MySQL messages table contains two columns msg_id and message
CREATE TABLE messages
(
msg_id INT PRIMARY KEY AUTO_INCREMENT,
message VARCHAR(150)
);
(
msg_id INT PRIMARY KEY AUTO_INCREMENT,
message VARCHAR(150)
);
JavaScript Code
This script works like a data controller.
<script type="text/javascript" src="http://ajax.googleapis.com/
ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
function loading_show()
{
$('#loading').html("<img src='images/loading.gif'/>").fadeIn('fast');
}
function loading_hide()
{
$('#loading').fadeOut();
}
function loadData(page)
{
loading_show();
$.ajax
({
type: "POST",
url: "load_data.php",
data: "page="+page,
success: function(msg)
{
$("#container").ajaxComplete(function(event, request, settings)
{
loading_hide();
$("#container").html(msg);
});
}
});
}
loadData(1); // For first time page load default results
$('#container .pagination li.active').live('click',function(){
var page = $(this).attr('p');
loadData(page);
});
});
</script>
ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
function loading_show()
{
$('#loading').html("<img src='images/loading.gif'/>").fadeIn('fast');
}
function loading_hide()
{
$('#loading').fadeOut();
}
function loadData(page)
{
loading_show();
$.ajax
({
type: "POST",
url: "load_data.php",
data: "page="+page,
success: function(msg)
{
$("#container").ajaxComplete(function(event, request, settings)
{
loading_hide();
$("#container").html(msg);
});
}
});
}
loadData(1); // For first time page load default results
$('#container .pagination li.active').live('click',function(){
var page = $(this).attr('p');
loadData(page);
});
});
</script>
load_data.php
Contains PHP coding. Displaying data from the messages table.
<?php
if($_POST['page'])
{
$page = $_POST['page'];
$cur_page = $page;
$page -= 1;
$per_page = 15; // Per page records
$previous_btn = true;
$next_btn = true;
$first_btn = true;
$last_btn = true;
$start = $page * $per_page;
include"db.php";
$query_pag_data = "SELECT msg_id,message from messages LIMIT $start, $per_page";
$result_pag_data = mysql_query($query_pag_data) or die('MySql Error' . mysql_error());
$msg = "";
while ($row = mysql_fetch_array($result_pag_data))
{
$htmlmsg=htmlentities($row['message']); //HTML entries filter
$msg .= "<li><b>" . $row['msg_id'] . "</b> " . $htmlmsg . "</li>";
}
$msg = "<div class='data'><ul>" . $msg . "</ul></div>"; // Content for Data
/* -----Total count--- */
$query_pag_num = "SELECT COUNT(*) AS count FROM messages"; // Total records
$result_pag_num = mysql_query($query_pag_num);
$row = mysql_fetch_array($result_pag_num);
$count = $row['count'];
$no_of_paginations = ceil($count / $per_page);
/* -----Calculating the starting and endign values for the loop----- */
//Some Code. Available in download script
}
?>
if($_POST['page'])
{
$page = $_POST['page'];
$cur_page = $page;
$page -= 1;
$per_page = 15; // Per page records
$previous_btn = true;
$next_btn = true;
$first_btn = true;
$last_btn = true;
$start = $page * $per_page;
include"db.php";
$query_pag_data = "SELECT msg_id,message from messages LIMIT $start, $per_page";
$result_pag_data = mysql_query($query_pag_data) or die('MySql Error' . mysql_error());
$msg = "";
while ($row = mysql_fetch_array($result_pag_data))
{
$htmlmsg=htmlentities($row['message']); //HTML entries filter
$msg .= "<li><b>" . $row['msg_id'] . "</b> " . $htmlmsg . "</li>";
}
$msg = "<div class='data'><ul>" . $msg . "</ul></div>"; // Content for Data
/* -----Total count--- */
$query_pag_num = "SELECT COUNT(*) AS count FROM messages"; // Total records
$result_pag_num = mysql_query($query_pag_num);
$row = mysql_fetch_array($result_pag_num);
$count = $row['count'];
$no_of_paginations = ceil($count / $per_page);
/* -----Calculating the starting and endign values for the loop----- */
//Some Code. Available in download script
}
?>
Very nice....
Please write tutorial Codeigniter and Jquery...
Great!
good one brother
Nice ;)
Its nice script :)
thanks
very niceeeeeeeeeeeee..............
very nice....this type of paging i expected thanks.
Hi, thank a lot for this!
hope you some day write some implementation with codeigniter!
greetings!
Note : New Subscribers
new email data updating every 6 hours
nice and like it very much.
Thanks a ton Srinivas... working awesome...
You rock :)
nice script ;)
Thanks..It's Good
Thanks
Hi srinivas
Firstly Thank For this nice script. But ı can't download this script Though I Subscribed my mail. When ı dowload it a warning comes on the screen as "1 Email Pending Verification. Please active or Subscribe" but I've activated my mail. what is wrong I dont know?
For some reason this demo crash any website hosted in a basic Godaddy hosting.
Any fix for this?
its a great job...
thanks a lot ^^
salam bloglang \m/ :D
Thank you it's nice, my social media is done but yours pagination i add.
Signup & active:
1.activated my mail
Download:
2.Sorry no email present subscribe below...
signup:
3.My Email is already subscribed to the mailing list of 9lessons.
Download again:
4.Sorry no email present subscribe below...
Download again,again and again:
5.Sorry no email present subscribe below...
help me?
@Lori
New subscriber emails updating every 12 hours
oic....thanks you so much...
Hi Ravi, sorry, but I've subscribed since this morning, and still cannot download it :S Need help!! :)
Very Nice, I implement this post using POO, PDO and MVC, Coming soon in my blog!!!
Thank you Ravi Tamada.
@Norant
You are Welcome :)
thanks for the nice tutorial.
Ravi, can you make another tutorial about how to apply pagination on search result.
thanks for the nice script! I really love it, but it doesn't work on iOS Devices :-(
The navigation isn't clickable...
Cannot enter a page number with Firefox :(
Brilliant posting you have done great job, it’s so great helpful for me. And I am looking forward of this post thank you.
Hi,
The page numbers are flashing on mouseover and I am unable to see any changes on clicking them.
I am using Google Chrome, any idea what's wrong?
Thanks
Just in case anyone's having a problem with iOSX devices (iphone,ipads) you need add:
$('#pagination .pagination li.active').live('touchend',function(){
var page = $(this).attr('p');
loadData(page);
});
in the JavaScript for iOSX Support as these devices do not support 'click' ...
Great Script, Many Thanks...
@Chris : Thanks for the Great tip!
Thanks for sharing such a nice stuff. Please share some more stuff of AJAX with php/mysql.
Thanks beforehand.
man this is so cool i love your pagination tutorial, keep it coming.
THANKS
Subscribers emails updated..
thanks for this nice tutorial. a very big help to me. btw, how can I pass a parameter into the load_data.php script? e.g. search result
ur site is my first reference now..
The Best Tutorial. Thank you.
It's really great. Thanks ~
Nice work bro..its really good..
I know this may sound stupid but, how can I add the tables already on my website to my mysql database named as messages since this program needs them to be called messages. Thank You
this tutorial is great. One suggestion though. it would be very much helpful if can also advice how to make this AJAX more SEO friendly.. please assist someone..
good
bug: on refresh goes to page 1: How do I fix that?
This is ajax pagination. Once page refresh It will show fist page.
good work
how to apply pagination on search result.
urgent
help me,
I need a search model
I've modified the file load_data.php
$query_pag_data = "SELECT msg_id,message from messages";
$query_pag_data = $query_pag_data ."where msg_id is not null ";
if (isset($_POST['txt_search'])) {
$txt_search = $_POST['txt_search'];
$query_pag_data = $query_pag_data ."and message like '%$txt_search%'";
}
$query_pag_data = $query_pag_data ."LIMIT $start, $per_page ";
file pagination.php
function loadData(page){
loading_show();
var txt_search = $("input#txt_search").val();
$.ajax
({
type: "POST",
url: "load_data.php",
data: "page="+page+txt_search,
success: function(msg)
{
$("#container").ajaxComplete(function(event, request, settings)
{
loading_hide();
$("#container").html(msg);
});
}
});
}
not work
anyone can help me
thank you
Thank you.
It is really seemed a good tutorial , but i need to download it.
I subscribe but nothing happened to download the script
Can anyone demonstrate a classic asp version of this?
Emails updated
I not Javascript programmer but found this part of the code would load in an increment times each times I click the next or previous page, which mean:
$("#container").ajaxComplete(function(event, request, settings) { alert("load"); ... }
it seem to load with one alert prompt, when I click "page 2", it would prompt 2 times,
click "page 5", it would prompt 3 times,
click "page 1", it would prompt 4 times
if I click 50 pages, am I expect it to prompt 50 times rather than once? I not sure where is the problem. I would appreciate to know if anyone can solve this bug.
Hi,
Thanks for the code.
Could you please update the emails database ?
Thanks!
Yep, looks very nice. Unfortunately, I can't download the script even if I confirmed my subscription.
Can you update the email database please?
Oups, just see, database update every 18 hours, thks.
Hi, Need email id, i want to download the file..
Can u update the email db please?
nice tut's Ravi,
and i think i'm already get 18 hours but why still can't reach the data for download,
please update the database,..thx
Oink
excellent, thanks.
Excellent script, I used this script in my codeigniter project...
Thanks for sharing this kind of stuff.
Why are you mixing presentation with business layer?
please Update your database as soon as possible as i want to download script
Hi,
thaks for this script but I have a problem using with fancybox.this lines
$("#container").ajaxComplete(function(event, request, settings)
{
loading_hide();
$("#container").html(msg);
});
are not compatible with Fancybox call.
Do you have any solutions?
Thanks
Nice tutorial, but I've a problem with loading icon. In first load appears there for ever unless if you click to move to another page. Then works fine (IE8). Also, how I can change the mouse pointer?
This is *great*. Thank you very much.
Cheers.
Awesome - can you refresh the email list?
can u provide me the pagination.php page ?????
How can I sort the results?
Awesome - can you refresh the email list?
Hi, nice script, but I have problem with it in ie (all version).
when I have more then 1 page it doesn´t work - I mean it doesn´t show comments just pagination without style etc.
don´t you know where is mistake?
thank for your answer.
thanks it a great help
dude, seriously? you're making people subscribe before they can dl the tutorial? and then you have an 18 hour wait?!? not cool.
@Mike
We are not charging anything, if you want this script wait sometime.
hey man you are great !!!!
Thanx...
Wow, I just Love This Man
You Rocks
jQuery Rocks
can i ask if we can add search for a record. and can we jump for a specific page because i have a large database thanks
Thanks
Thanks, but i am waiting forever for download code....
also to fix multiple requests when click add
return false; after loadData(page)
excellent, thanks.
Hi Srinivas,
Any update about this:
Quote:
I not Javascript programmer but found this part of the code would load in an increment times each times I click the next or previous page, which mean:
$("#container").ajaxComplete(function(event, request, settings) { alert("load"); ... }
it seem to load with one alert prompt, when I click "page 2", it would prompt 2 times,
click "page 5", it would prompt 3 times,
click "page 1", it would prompt 4 times
if I click 50 pages, am I expect it to prompt 50 times rather than once? I not sure where is the problem. I would appreciate to know if anyone can solve this bug.
Thanks
Nice!
How can i run multiple instances of this on a page? i have a page with tabs showing different content that i want to paginate.
Very useful in sequence provided.
Phone sex uk
Hello friend, very nice tutorial.
I have a problem. I cannot display Greek characters from my db. It shows "?? ????? SEO?".
i try this on db.php "mysql_query("SET CHARACTER SET utf8");" but nothing.
Any Help?
Help! Need emails update! I want to download it!
Does this supports Arabic ?
greate bro...
Great script. Just one suggestion for future revision - and this is common to a lot of AJAX pagination scripts: hard-coding the page size into the script may not be helpful for all applications. I use a variation of this script with a database which returns anything from 1 - 132 results, depending on the search term. For a majority of search terms, a page with 10 results is fine (and more importantly, keeps all the important information in view on even a smallish desktop), but not so useful for the small number of search terms returning a lot of results.
hi,
im beginer in developing... How can i add another column to this scrpit. I would like to display id image and description. Thanks:)
thanks for this nice tutorial. But don't work for me. show object not found and below pagination buttons only. btw, how can I pass a parameter into the load_data.php script? e.g. search result using php array to javascript
hopefully you still update the emails :) I liked one of your old tutorials a lot! Hopefully this will shed some lights in my head!
Hi,
My Name is vishal from last some days i was searching the code of paging
....and i want to tell you thank you this code solved my all problems