Question

I have a jQuery Ajax call which passes entered sql string and returns data rows accordingly. Because these can be quite large amounts of data I changed the call to take a skip and no. of records parameter. This is ok but what I really want is to list all data, as one call can return a large amount I was hoping to maybe split it up.

The process I would like to do is:

• Ajax Call to process data and store the rows somewhere
• Return the first 25 rows
• Add 25 rows to div
• Get the next 25
• Add next 25 rows to div
• etc until no more rows to add

Has anyone needed to do something like this before or has any suggestions as to how I can get a large amount of data via Ajax? For reference I’m using an ASP.Net WebMethod.

Answer 1

You can fetch more rows in the AJAX callback function. You just need to keep track how many “pages” are already there.

var options = { rows : 25, offset : 0, url : 'irrelevant' },
fetchRows = function(){
    $.get( options.url, { rows : options.rows, offset : options.offset  }, render );
    options.offset++;
},
render = function( data ){
  /* perform the rendering  here */

    if( data.length == options.rows ){ /* assuming `data` is an array of rows */
        fetchRows();
    }
};

fetchRows sends the AJAX request and sets render as the callback function. render then calls fetchRows again if previous request has returned as many rows as there can fit on one “page” (in this example last page will have < 25 rows, so there’s no need to keep fetching).