LazyLoad content from mysql/php Json encoded data and Jquery

Question

i'm creating a mobile app using Jquery mobile. i am getting the data from mysql DB to a PHP page and i encode the data as Json then i render it in my HTML page with a Jquery ajax request and append data to a JQM 'listview' but since the amount of data is huge i want to load the list view gradually when user scrolls to the bottom of the page "Lazy Loading"

My PHP code sample:

$result = mysql_query("SELECT * FROM $tableName ORDER BY alpha");

$array = mysql_fetch_row($result);     

    $data = array();    
    while ($row = mysql_fetch_row($result))
    {   
    $data[] = $row;

    }

    echo $_GET['callback'] . '('.json_encode($data).')';

My JS code :

 $.ajax({ 
  type: "POST",                                     
  url: 'http://example.com/api.php',  
  dataType: 'jsonp',
  contentType: "application/json",
  cache: false,
  success: function(data)
  { 
  $("#loading").hide();  
    for (var i in data) 
    {
      var row = data[i];          
      var id =  row[0];
      var alpha = row[1]
      var name =row[2];
      var url = row[3];   

     $("#filelist").append('<li id="'+id+'"><input name="name'+id+'" id="song'+id+'" type="checkbox" class="selectme"><label for="song'+id+'" rel="'+url+'">'+name+'</label></li>').trigger("create");   
     $("#filelist").listview("refresh");

    }
      $("#filelist").listview("refresh");

});

this works fine but loads all my data from the DB how i can load the data in chunks not one time i use the waypoint plugin to detect the scroll to bottom action all i need now is help with loading the data gradually from the DB

Note: i tried using the dcarrith.github.io/jquery.mobile.lazyloader/ but couldn't reach a solution.

your help is Greatly appreciated

UPDATE: I managed to Load my Json data coming from DB in different pages so i can call the first 10 items from the url www.myDomain.com/api.php?page=2 and www.myDomain.com/api.php?page=1 and so on and when you call this in the jquery Ajax request you only load this amount of data.

The code is as follows to achieve paging :

<?php
  header('Content-type: text/html; charset=utf-8');
  $host = "xxxxxxxxxxx";
  $user = "xxxxxx";
  $pass = "xxxxxx";

  $databaseName = "xxxxxxx";
  $tableName = "xxxxxxxx";

  //--------------------------------------------------------------------------
  // 1) Connect to mysql database
  //--------------------------------------------------------------------------

  $con = mysql_connect($host,$user,$pass);
  $dbs = mysql_select_db($databaseName, $con);

    $tbl_name="xxxxxx";     //your table name
    // How many adjacent pages should be shown on each side?
    $adjacents = 3;

    /* 
       First get total number of rows in data table. 
       If you have a WHERE clause in your query, make sure you mirror it here.
    */
    $query = "SELECT COUNT(*) as num FROM $tbl_name";
    $total_pages = mysql_fetch_array(mysql_query($query));
    $total_pages = $total_pages[num];

    /* Setup vars for query. */
    $targetpage = "test.php";   //your file name  (the name of this file)
    $limit = 10;                                //how many items to show per page
    $page = $_GET['page'];
    if($page) 
        $start = ($page - 2) * $limit;          //first item to display on this page
    else
    $start = 0;                             //if no page var is given, set start to 0

    /* Get data. */
    $sql = "SELECT * FROM $tbl_name ORDER BY alpha LIMIT $start, $limit";
    mysql_query("SET NAMES utf8;");
    $result = mysql_query($sql);

    /* Setup page vars for display. */
    if ($page == 0) $page = 1;                  //if no page var is given, default to 1.
    $prev = $page - 1;                          //previous page is page - 1
    $next = $page + 1;                          //next page is page + 1
    $lastpage = ceil($total_pages/$limit);      //lastpage is = total pages / items per page, rounded up.
    $lpm1 = $lastpage - 1;                      //last page minus 1

    /* 
        Now we apply our rules and draw the pagination object. 
        We're actually saving the code to a variable in case we want to draw it more than once.
    */
    $pagination = "";
    if($lastpage > 1)
    {}
?>

    <?php
    $data = array();
        while($row = mysql_fetch_array($result))
        {

        // Your while loop here
        $data[] = $row; 

        }
        echo $_GET['callback'] . '('.json_encode($data).')';
    ?>

<?=$pagination?>

what is left now is :

HOW TO MAKE THE JQ AJAX REQUEST DYNAMIC TO CALL ?PAGE=2 THEN ?PAGE=3 TILL THE END OF CONTENT !?

I CAN DETECT THE SCROLL TO BOTTOM ACTION WITH THE WAYPOINT PLUGIN - your help is greatly appreciated - Thanks

Answer 1

You are going to want to teach your PHP API as well as your jQuery Mobile App the notions of 'offset' and 'limit'.

Let's say you want to load the elements 10 at a time:

Your first request would be:

http://example.com/api.php?offset=0&limit=10

You second request (triggered on scroll) would be:

http://example.com/api.php?offset=10&limit=10

You would append this ajax result to the existing list...

On the PHP side you want:

mysql_query("SELECT * FROM $tableName ORDER BY alpha LIMIT $limit OFFSET $offset")

Answer 2

This is like two years already. but i think i have an idea. What if you put the ajax in a function and then whenever you detect end of page, you call the function. and dynamically changing the url.