I found this tutorial http://www.w3schools.com/PHP/php_ajax_database.asp that lets me use Ajax with MySQL to retrieve data based on the selected value from a drop-down list. It works well, but sometimes when I retrieve data by selecting a value from the drop-down list, there are too many records displayed on the page. How can I add pagination to this script so that when I retrieve more than a certain number of records, I get pagination on the bottom to flip through pages?
Hello, I made some changes , they are not the best , but I made it very quick - what came to my mind! so... the first page (i called it index.php) <html> <head> <script type="text/javascript" src="selectuser.js"></script> </head> <body> <form> Select a User: <select name="users" onchange="showUser(this.value,'0')"> <option value="1">Peter Griffin</option> <option value="2">Lois Griffin</option> <option value="3">Glenn Quagmire</option> <option value="4">Joseph Swanson</option> </select> </form> <br /> <div id="txtHint"><b>Person info will be listed here.</b></div> </body> </html> PHP: - i changed the javascript function -> added another param (page), so you have now selectuser.js var xmlhttp; function showUser(str,page) { xmlhttp=GetXmlHttpObject(); if (xmlhttp==null) { alert ("Browser does not support HTTP Request"); return; } var url="getuser.php"; url=url+"?q="+str; url=url+"&sid="+Math.random(); //added page variable to send to the http request url=url+"&page="+page; xmlhttp.onreadystatechange=stateChanged; xmlhttp.open("GET",url,true); xmlhttp.send(null); } function stateChanged() { if (xmlhttp.readyState==4) { document.getElementById("txtHint").innerHTML=xmlhttp.responseText; } } function GetXmlHttpObject() { if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari return new XMLHttpRequest(); } if (window.ActiveXObject) { // code for IE6, IE5 return new ActiveXObject("Microsoft.XMLHTTP"); } return null; } Code (markup): and getuser.php <?php $q=$_GET["q"]; // added for pagination $page=$_GET["page"]; $fperpage = 5; // change the number of results per page $limit = $page * $fperpage; $con = mysql_connect('localhost', 'root', ''); // here complete with your DB username and password if (!$con) { die('Could not connect: ' . mysql_error()); } mysql_select_db("dp", $con); // here change with your database name // i think you will have another query here , but don't forget LIMIT $limit,$fperpage $sql="SELECT * FROM user WHERE 1 LIMIT $limit,$fperpage"; $result = mysql_query($sql); echo "<table border='1'> <tr> <th>Firstname</th> <th>Lastname</th> <th>Age</th> <th>Hometown</th> <th>Job</th> </tr>"; while($row = mysql_fetch_array($result)) { echo "<tr>"; echo "<td>" . $row['FirstName'] . "</td>"; echo "<td>" . $row['LastName'] . "</td>"; echo "<td>" . $row['Age'] . "</td>"; echo "<td>" . $row['Hometown'] . "</td>"; echo "<td>" . $row['Job'] . "</td>"; echo "</tr>"; } echo "</table>"; // added another query , is needed for geting the count of all fields $sql=str_replace(" LIMIT $limit,$fperpage",'',$sql); $result = mysql_query($sql); $num = mysql_num_rows($result); mysql_close($con); $nrpage = ceil($num / $fperpage); $i = 0; while($i < $nrpage){ echo "<a href='#' onclick='showUser($q,$i);return false;'>".($i+1)."</a> "; $i++; } ?> PHP: here I made some changes, i tried to comment on each one! Hope that helps you.
I did what you said there, but I get page links and clicking on them does nothing. To the links <a href='#' onclick='showUser($q,$i);return false;'> in getuser.php I added onclick and also in the selectuser.js I added the page parameter called 'page' to know which page to retrieve. On the index.php page I added the page parameter to the onchange call to showUser(this.value,'0'). Clicking on the page links does not give any errors and page 1 is always selected and I cannot select the other pages as the links seem not to do anything when clicked. Did you test the code above and can you confirm that it works on your side?
I think that the page links don't work because getuser.php file does not have the definition of showUser(). Even though index.php includes selectuser.js where the showUser() function is located, getuser.php itself does not. Now, my question is, how can I include selectuser.js in getuser.php file which by itself is just a php script without any html elements?