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 Satya Prakash

    but how do you know that it is going to recursive calls!

  • # 2 - by Satya

    but how do you know that it is going to recursive calls!

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