Question

I have a DataGrid that I fetch with the 300 most updated documents. I would now provide a button in the GUI by which the user can load further 100 records.
The goal would be to load the “next” 100 records by integrating them with the existing data, rather than load the 400 (3000 + 100) most updated records.

One solution would be to get the data via webMethod and Ajax call and then build 100 table cells < td> and append them at the bottom of the table.

But I found this approach less than optimal.
I use the DataTables Jquery plugin to provide some nice feature like ordering and columns reordering.

How could I add the new records in an incremental way, without post back?

Answer 1

Did you see this page in their docs? It gives you an idea on how to dynamically add rows to a DataTable.

    $('#example').dataTable().fnAddData( [
        "First Column",
        "Second Column",
        "Thrid Column",
        "Fourth Column" ] );

You could execute this function in the call back of your ajax call with the data you wish to populate.

$.ajax({
  url: "test.html",
  context: document.body,
  success: function(){
    $('#example').dataTable().fnAddData( [
            "First Column",
            "Second Column",
            "Thrid Column",
            "Fourth Column" ] );
  }
});