Hey guys if you look at the code below I'm trying to set the pagination class so that it shows the numbers maybe like Google does, but as of now it shows like 18 pages and so on I want it to stop at 10 then if 10 is clicked on it will show the new pages like 10-20, and so on. instead of showing 1 to whatever. I'm confused on how I would do this. <? class paging { var $pRecordCount; var $pStartFile; var $pRowsPerPage; var $pRecord; var $pCounter; var $pPageID; var $pShowLinkNotice; function processPaging($rowsPerPage,$pageID) { $record = $this->pRecordCount; if($record >= $rowsPerPage) $record=ceil($record/$rowsPerPage); else $record=1; if(empty($pageID) or $pageID==1) { $pageID=1; $startFile=0; } if($pageID>1) $startFile=($pageID-1)*$rowsPerPage; $this->pStartFile = $startFile; $this->pRowsPerPage = $rowsPerPage; $this->pRecord = $record; $this->pPageID = $pageID; return $record; } function myRecordCount($query) { $rs = mysql_query($query) or die(mysql_error()."<br>".$query); $rsCount = mysql_num_rows($rs); $this->pRecordCount = $rsCount; unset($rs); return $rsCount; } function startPaging($query) { $query = $query." LIMIT ".$this->pStartFile.",".$this->pRowsPerPage; $rs = mysql_query($query) or die(mysql_error()."<br>".$query); return $rs; } function pageLinks($url,$concat) { $this->pShowLinkNotice = " "; if($this->pRecordCount > $this->pRowsPerPage) { $this->pShowLinkNotice = "Page ".$this->pPageID. " of ".$this->pRecord; //Previous link if(isset($concat)){ if($this->pPageID!==1) { $prevPage = $this->pPageID - 1; $link = "<a href=\"$url?pid=$prevPage $concat\"><<</a> "; }}else{ if($this->pPageID!==1) { $prevPage = $this->pPageID - 1; $link = "<a href=\"$url?pid=$prevPage\"><<</a> "; } } //Number links 1.2.3.4.5. echo $this->pRecord; for($ctr=1;$ctr<=$this->pRecord;$ctr++) { if(isset($concat)){ if($this->pPageID==$ctr) $link .= " <a href=\"$url?pid=$ctr $concat\"><b>$ctr</b></a>"; else $link .= " <a href=\"$url?pid=$ctr $concat\">$ctr</a>"; }else{ if($this->pPageID==$ctr) @$link .= " <a href=\"$url?pid=$ctr\"><b>$ctr</b></a>"; else $link .= " <a href=\"$url?pid=$ctr\">$ctr</a>"; } } //Previous Next link if($this->pPageID<($ctr-1)) { $nextPage = $this->pPageID + 1; if(isset($concat)){ $link .= " <a href=\"$url?pid=$nextPage $concat\">>></a>"; }else{ $link .= " <a href=\"$url?pid=$nextPage\">>></a>"; } } return $link; } } } ?> PHP:
A JavaScript solution: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Any Title</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script type="text/javascript"> var maxItems = 21; // this is the number of documents/pages in the set var consecItems = 10; // this is the number of integers appearing in between Previous and Next var path = "./products/product_"; // the path and partial file name of your data documents, e.g., product_1.html; var ext = ".html" // the file extension of your data files, e.g., .php, .pl, .asp, .aspx function init(){ var activeURL = ""; var endItem = ""; var remaining = ""; var nextSet = ""; var index = 0; var nList = document.getElementById('itemLinks'); for (i=0; i<consecItems+2; i++) { var nLink = document.createElement('span'); nLink.onclick = function() { var pageList = nList.getElementsByTagName('span'); if (this.firstChild.data == "Next") { if (pageList[pageList.length-2].firstChild.data == maxItems && pageList[pageList.length-2].className == "activePage") { return false; } if (pageList[pageList.length-2].className != "activePage") { for (i=1; i<consecItems+1; i++) { if (pageList[i].className == "activePage") { pageList[i].className = "availPage"; index = i+1; } } if (pageList[index].firstChild.data == "-") { pageList[index-1].className = "activePage" return false; } pageList[index].className = "activePage"; } else { endItem = pageList[pageList.length-2].firstChild.data; remaining = maxItems - endItem; if (remaining >= consecItems) { nextSet = consecItems+1; } else { nextSet = remaining + 1; } for (i=1; i<nextSet; i++) { pageList[i].firstChild.data = Number(endItem) + i; } for (i=1; i<consecItems+1; i++) { if (pageList[i].firstChild.data <= Number(endItem)) { pageList[i].firstChild.data = "-"; } } pageList[1].className = "activePage"; pageList[pageList.length-2].className = "availPage"; } } else if (this.firstChild.data == "Previous") { if (pageList[1].firstChild.data == 1 && pageList[1].className == "activePage") { return false; } if (pageList[1].className != "activePage") { for (i=1; i<consecItems+1; i++) { if (pageList[i].className == "activePage") { pageList[i].className = "availPage"; index = i-1; } } pageList[index].className = "activePage"; } else { endItem = pageList[1].firstChild.data; remaining = endItem - 1; var nSet = ((remaining / consecItems) - 1) * consecItems; for (i=1; i<consecItems+1; i++) { pageList[i].firstChild.data = i + nSet; } pageList[1].className = "availPage"; pageList[pageList.length-2].className = "activePage"; } } else { if (this.firstChild.data == "-") { return false; } for (i=1; i<consecItems+1; i++) { if (pageList[i].className == "activePage") { pageList[i].className = "availPage"; } } this.className = "activePage"; } for (i=1; i<consecItems+1; i++) { if (pageList[i].className == "activePage") { activeURL = path + pageList[i].firstChild.data + ext; } } //alert(activeURL); // the following loads each selected document window.frames['docDisplay'].location.replace(activeURL); } nLink.className = "availPage"; var nText = document.createTextNode(i); nLink.appendChild(nText); nList.appendChild(nLink); } var nItems = nList.getElementsByTagName('span'); nItems[1].className = "activePage"; nItems[0].firstChild.data = "Previous"; nItems[nItems.length-1].firstChild.data = "Next"; // the following loads the initial document, product_1.html window.frames['docDisplay'].location.href = path + "1" + ext; } onload=init; </script> <style type="text/css"> body {background-color:#eae3c6;margin-top:60px} #itemLinks {background-color:#f0fff0;font-family:times;font-size:12pt;border:1px solid black;text-align:center;width:600px;margin:auto;position:relative;top:50px} #docDisplay {background-color:#ffdab9;display:block;width:600px;height:400px;margin:auto} .availPage {color:#0000ff;cursor:pointer;padding:5px} .activePage {color:#000000;padding:5px;text-decoration:underline;cursor:auto} </style> </head> <body> <iframe name="docDisplay" id="docDisplay" scrolling="auto"></iframe> <div id="itemLinks"></div> </body> </html> Code (markup):
I don't understand. I just don't think it's efficient perform something like "paging" by putting that burden on the server. Even if the number of pages isn't static, a php echo can set the value of the maxItems JavaScript variable.