2

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

Termininja
  • 5,689
  • 12
  • 40
  • 45
user1561923
  • 201
  • 3
  • 6
  • 11
  • 1
    No, please no, not [infinite scrolling](http://blog.tommorris.org/post/21073443312/introducing-awfulness-js). – Quentin Sep 14 '12 at 07:43
  • This isn't really a MySQL question, more of a JavaScript one... try http://stackoverflow.com/a/5212757/889604 – ChrisW Sep 14 '12 at 07:43
  • possible duplicate of [How does Facebook achieve infinite scrolling?](http://stackoverflow.com/questions/10404699/how-does-facebook-achieve-infinite-scrolling) – Quentin Sep 14 '12 at 07:44

3 Answers3

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'];
          }
    }
vivek salve
  • 985
  • 1
  • 9
  • 20
0

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.
alexandernst
  • 12,102
  • 18
  • 74
  • 171
  • can u please provide a link for this or explain in detail – user1561923 Sep 14 '12 at 07:45
  • @user1561923 - there are at least 3 examples in the comments to your original question – ChrisW Sep 14 '12 at 07:47
  • Well, the JavaScript part doesn't need any further example as that a copy-and-paste working example. You need to write the code in the "my_page.php" that will fetch N entries each time. I'll update my answer. – alexandernst Sep 14 '12 at 07:47
0

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
DonCallisto
  • 27,046
  • 8
  • 62
  • 88