jQuery Ajax无限滚动阅读PHP

Question

I would like to implement the infinite scroll with AJAX.

This is my current jQuery code:

$(document).on("pagebeforeshow", "#page-main", function(){
    get_simple_info();
});
function get_simple_info(){
    var info = "";
    $.getJSON('classes/load.php', function(data){
        $.each(data, function(index, item) 
        {
            info += "<li id='" + item.id + "'><p>" + item.name + "</p></li>";
        });
        $("#listview_A").append(info); 
        $("#listview_A").trigger("change");
        $("#listview_A").listview("refresh");
    });
}

And the function is very simple either.

$query = $db->prepare("SELECT * FROM people ORDER BY ID DESC LIMIT 15");
$query->execute();
$query->bind_result($id, $name);
$query->store_result();
$rows = array();
while($query->fetch()){
    $rows[] = array("id" => $id, "name" => $name);
}
$query->close();
$db->close();
return json_encode($rows);

I'm trying to guide myself by this tutorial: http://www.w3bees.com/2013/09/jquery-infinite-scroll-with-php-mysql.html , but as you can see it has no ajax.request, it is all done in PHP.

My current listview_A code is the following:

<ul data-role="listview" id="listview_A" data-inset="true" data-mini="true">
    <li style="height: -2px; background-color: #666666"></li>
</ul>

With the jQuery I do append more items to the <ul> tag further than the one (by default) that is there.

Said this, I really don't know where to start adapting that tutorial to my code, can you guys give me some lights?

Thanks.

Edit : Solved. See the answer below.

Answer 1

Before sending any data to server, check if the page is already loading. Eg

if(alreadyloading == false){
    alreadyloading = true;
    SEND THE DATA TO SERVER
    ACCEPT JSON RESPONSE
    APPEND TO YOUR HTML
    INCREMENT YOUR PAGE NUMBER
   make alreadyloading = false;
}

Now while sending the data to your server page, add this page-number with it so the query will be like

First calculate the LIMIT values Suppose you are willing to display five results in a scroll, $page_size = 5 $offset = ($page_num - 1)*$page_size; So for page_num = 1 , your offset will be 0 Hence,

SELECT * FROM table_name LIMIT 0,5

For page_num = 2 , $offset = 5 SELECT * FROM table_name LIMIT 5,10 And so on