Paging in PHP, MySQL and Ajax
Please look at here first to understand this.
Page::ajax_req.js
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")
{
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);
}
----------------------------------------------------------------
You can use event to fire paged data (call to javascript:htmlDate()) or you can directly call js function htplData(). Remember to provide "txtResult" element (div/p). It is used in Ajax function call.
<html>
<head>
<title>PHP Paging Result</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script src="ajax_req.js" type="text/javascript"></script>
<script>htmlData('paging.php', 'p=1')</script>
</head>
<body>
<div id="txtResult"></div>
<div style="clear:both"></div>
<input type="button" value="Click" onclick="htmlData('paging.php', 'p=1')" />
</body>
</html>
----------------
Difference from original paging:
Use this pagination page and change them to these:
Only change is 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>';
}
4 Comments:
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?
You can use table or try little bit more with css. It can be fixed.
This is great! thanks Satya.. is there any way to do this without making two queries to the database?
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
Post a Comment