how to load millions rows, little by little with ajax in datatables

问题

Seeing datatables I cannot achieve this goal. For now I can load them in different ways, with ajax (by using the server side) different rows and with different orders, but for now I cannot load rows for example in 4 or 5 times making multiple request ajax ( I want to use the scroll to load little by little).

How could I do this?

回答1:

What about modifying your ajax to load x number of rows, starting with the first, then when the top offset of the last entry comes into view you could fire another ajax event on the same file, but use x to know what the last row was to be loaded so it will know which row to start loading from?

So say it loads rows 0-5 initially, and when 5 comes into view, it fires an event that would pass through the same ajax but with the value 5, so it would start from 6 and load the next 6 rows, and so on You would be able to use the same function for the initial and following loads, it would just get appended to the html of the main element.

EDIT Okay, so we'll need a php file that pulls and formats the data, and an html file that contains the ajax and displays everything.

for the php, something like:

$offset = 0;
$sql = "SELECT * FROM table ORDER BY id LIMIT 20, ".$offset;

Then run a loop to format the rows how you would like them to be.

This will populate the page initially with 20 posts from the offset, which is 0 by default.

Then for the Ajax, there're two parts. First is create an action when the last item comes into view:

var go = true;
function hitbottom() {
    var sh = $(window).scrollTop();
    var wh = $(window).height();
    var ih = $('.item').last().offset().top;
    if ((sh+wh)<ih && go) {
        //run ajax
    }
}

This should be run on scroll to trigger when the top of the last item hits the bottom of the screen.

The second is to create the ajax form, which needs to know the id of the last row shown. It will use that value to change the value of the offset variable in the php file, which will then get the next 20 rows and send them back to jquery to append to the html in the callback, and so on...

The ajax part should set go to false, then set it back to true on the callback to start it all over again.

To append the data, you can use something like this:

$('#element').append(data);

This is untested, and just an idea. I would imagine it's similar to how your facebook feed loads. Once you hit the bottom it pops up the loading icon, and loads the next set of posts. Only with this, it will begin loading just before you hit the bottom, so unless you jet down right away, it should be able to pull the new data pretty quickly.

This also allows you to gradually increase the html file content, without loading a lot of content at once and slowing things down. There may still be a limit, but it should be pretty large.

来源：https://stackoverflow.com/questions/19502475/how-to-load-millions-rows-little-by-little-with-ajax-in-datatables