Paging in PHP, MySQL and Ajax

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 for simplicity. So, please read that article before continuing here. Thanks!

Here is Ajax code for paging:

Page::ajax_req.js

<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 (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 Jamil

    This is great! thanks Satya.. is there any way to do this without making two queries to the database?

  • # 2 - 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

  • # 3 - 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

  • # 4 - 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?

Comment pages
Comments are open for an year period. Please, write here on Facebook page.