How to fetch data from mysql database while scrolling - php

Question

I have a database and it contains more than 1000 records. I have to display it in front end php page, if I display all it will take more time to load so if user scrolls the information should be fetched after scrolling. Just like Facebook and Pinterest. How to achieve this...
My DB :- mysql
Server :- wamp

Answer 1

step 1] Take a help of little bit jquery as....
var countScroll= 0;
$(window).scroll(function()
{
if ($(window).scrollTop() == $(document).height() - $(window).height())
{
loadData();
}
countScroll++;
});
step 2] Take the help of ajax to call the loadData() function
function loadData()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
var res = xmlhttp.responseText;
document.getElementById("respDiv").innerHTML=res;
}
}
xmlhttp.open("GET","loadPageData.php?loadLimit="+countScroll,true);
xmlhttp.send();
}
step 3] your php page i.e. loadPageData.php is as...
$loadLimit= $_GET['loadLimit'];
$result = mysql_query("SELECT * FROM tableName limit $loadLimit");
if(mysql_num_rows($result)>0)
{
while($row = mysql_fetch_array($result))
{
echo $yourVariable= $row['fieldName'];
}
}

Answer 2

Your question is generic and difficult to answer with snippet of code.
This could be a solution in pseudo-language
Fetch a default number of element (say 50) by doing a query like this SELECT * FROM yourTable WHERE ..... ORDER BY .... LIMIT 50
Use jQuery to detect scroll event
Make an AJAX call once you detect scroll event
Make a new query where you fetch 50 elements again, but this time take into account that you have scrolled (so, add a delta or offset)
Render elements returned from AJAX

Answer 3

Use jQuery (or your favourite library) to detect when the user gets to the end of the page, then just trigger an AJAX request to the server for the next N results.
For example:
JavaScript part:
var n = 0;
$(document).ready(function() {
$(window).scroll(function() {
if ($('body').height() <= ($(window).height() + $(window).scrollTop())) {
$.ajax({
url: "my_page.php",
data: {'n' : n},
context: document.body
}).done(function(data) {
n += 1;
console.log(data); // <--- do stuff with received data here
});
}
});
});
PHP part:
$n = $_POST['n'];
$n = 10 * $n;
$sql = "SELECT * FROM mytable LIMIT $n, 10"; // get 10 new entries each request.