Here is a paging PHP script using PHP, MySQL and Ajax. In pagination, data present is of same nature thus page loading is not required. So, Ajax use is very justified in paging.
I am using almost the same code, I used in Paging using PHP and MySQL for simplicity. So, please read that article before continuing here. Thanks!
Here is Ajax code for paging:
<script>
function GetXmlHttpObject(handler)
{
var objXMLHttp=null
if (window.XMLHttpRequest)
{
objXMLHttp=new XMLHttpRequest()
}
else if (window.ActiveXObject)
{
objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP")
}
return objXMLHttp
}
function stateChanged()
{
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{
// txtResult will be filled with new page
document.getElementById("txtResult").innerHTML = xmlHttp.responseText
}
else {
//alert(xmlHttp.status);
}
}
function htmlData(url, qStr)
{
if (url.length==0)
{
document.getElementById("txtResult").innerHTML = "";
return;
}
xmlHttp = GetXmlHttpObject();
if (xmlHttp==null)
{
alert ("Browser does not support HTTP Request");
return;
}
url=url+"?"+qStr;
url=url+"&sid="+Math.random();
xmlHttp.onreadystatechange = stateChanged;
xmlHttp.open("GET",url,true) ;
xmlHttp.send(null);
}
</script>
----------------------------------------------------------------
You can use an event to fire paged data (call to javascript:htmlData()) or you can directly call JavaScript function htmlData(). Remember to provide "txtResult" element (div/p). It is used in Ajax function call.
<html>
<head>
<title>PHP <span title="pagination">Paging</span> Result</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script src="ajax_req.js" type="text/javascript"></script>
<script>
// Fire paging script on as soon as page load.
htmlData('paging.php', 'p=1');
</script>
</head>
<body>
<!-- Each page will show inside this div.
So, give it enough space. -->
<div id="txtResult"></div>
<div style="clear:both"></div>
<!-- Fire paging script using onclick event -->
<input type="button" value="Click" onclick="htmlData('paging.php', 'p=1');" />
<!-- a href="#" onclick="htmlData('paging.php', 'p=1'); return false;" >
Show Page </a -->
</body>
</html>
----------------
Difference from original paging:
As I have said before, I am using the previous code to achieve the paging using PHP, mySQL and Ajax. Above you got JavaScript code, HTML code but not PHP code used in this paging script. For PHP code, use the same script mentioned there but replace code inside Navigation part (the link directly go there) with script below:
(You will find changes only in 'href' of links)
for($page = 1; $page <= $maxPage; $page++) {
if ($page == $pageNum) {
$nav .= "<div class="pNo">$page</div>";
}
else
{
$nav .= "<div class="pNo"><a href="javascript:htmlData('paging.php','p=$page')">$page</a></div>";
}
}
if ($pageNum > 1) {
$page = $pageNum - 1;
$prev = "<a href="javascript:htmlData('paging.php','p=$page')"><strong><</strong></a>";
$first = "<a href="javascript:htmlData('paging.php','p=1')"><strong><<</strong></a>";
}
else {
$prev = '<strong> </strong>';
$first = '<strong> </strong>';
}
if ($pageNum < $maxPage) {
$page = $pageNum + 1;
$next = "<a href="javascript:htmlData('paging.php','p=$page')"><strong>></strong></a>";
$last = "<a href="javascript:htmlData('paging.php','p=$maxPage')"><strong>>></strong></a>";
}
else {
$next = '<strong> </strong>';
$last = '<strong> </strong>';
}
Hope you have enjoyed the pagination PHP script! So, share it with others. 
# 1 - by Keith
This worked perfectly. The only draw back was the navigation appears vertically in Google Chrome and IE browsers but horizontal in the Firefox browser. Is there a way to change this?
# 2 - by Keith
This worked perfectly. The only draw back was the navigation appears vertically in Google Chrome and IE browsers but horizontal in the Firefox browser. Is there a way to change this?
# 3 - by Satya Prakash Karan
You can use table or try little bit more with css. It can be fixed.
# 4 - by Satya Prakash Karan
You can use table or try little bit more with css. It can be fixed.
# 5 - by Jamil
This is great! thanks Satya.. is there any way to do this without making two queries to the database?
# 6 - by Jamil
This is great! thanks Satya.. is there any way to do this without making two queries to the database?
# 7 - by Satya Prakash Karan
may be!
you can use count(*) in the first statement.
but I am out of active development and I need to check my script again. So, ppz check yourself. Thanks
# 8 - by Satya Prakash Karan
may be!you can use count(*) in the first statement. but I am out of active development and I need to check my script again. So, ppz check yourself. Thanks
# 9 - by Keith
@Keith
OK, it does work but seems to give a problem allowing recursive or nested AJAX calls. I think that this is because of the following line:
xmlHttp.onreadystatechange = stateChanged;
which allows everything to work. Because from what I can tell it all fails when I change it to:
xmlHttp.onreadystatechange = stateChanged();
Which for some reason means that:
function stateChanged()
is in the code but never run. Can anyone get this to work as it should?
# 10 - by Keith
@Keith
OK, it does work but seems to give a problem allowing recursive or nested AJAX calls. I think that this is because of the following line:
xmlHttp.onreadystatechange = stateChanged;
which allows everything to work. Because from what I can tell it all fails when I change it to:
xmlHttp.onreadystatechange = stateChanged();
Which for some reason means that:
function stateChanged()
is in the code but never run. Can anyone get this to work as it should?
# 11 - by Satya Prakash
but how do you know that it is going to recursive calls!
# 12 - by Satya
but how do you know that it is going to recursive calls!