DataTable hang, Very slow to load more than 1000 Records

nizamani

Hi Gurus
I am new to use datatable , my record set return jason of 1500 records.
i am calling server side method which returns and fill records in data table. It almost take 12 seconds to fill records in the table. Please help .

mytable = $('#portfolioData').DataTable({"pageLength": 25, "OrderRecords": [[9, "asc" ]],"dom": 'rt<"bottom"lpi><"clear">' });

$.ajax({
type: "POST",
url: "ActivityMarketWatch.aspx/GetPortfolioMW",
//data: '{intPF: "' + strPortfolioID + '" }',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
//alert(response.d);
var objdata = $.parseJSON(response.d);
var strHTML = "";
var strRowHTML = "";
//alert(JSON.stringify(objdata));
$("#PropertyDetails").html("");
mytable.clear();
if (objdata.error == "0") {
alert( " i m here check timing now");
for (var i = 0; i < objdata.data.length; i++) {
mytable.row.add([objdata.data[i].col1,objdata.data[i].col2,objdata.data[i].col3,objdata.data[i].col4,objdata.data[i].col5]).draw();
}

kthorngren

The first thing I would do is remove .draw() from your row.add() then use mytable.draw() once you exit the for loop.

It looks like you are adding 5 columns but have this: "OrderRecords": [[9, "asc" ]],. What are you trying to do with this option?

Its unclear what your data structure and table structure are but you might be able to gain efficiencies by using columns.data to allow for using objects instead of arrays. Match up that structure to what is returned then simply use rows.add() like this:

mytable.rows.add(objdata.data);

Kevin

nizamani

Thanks Kevin ,
Well for columns they are greater then 5.i just edit my actual code.

i am not clear about your last stanza ,should i build object and put it in my table instead of of array 1 , array 2 etc.?

kthorngren

i am not clear about your last stanza ,should i build object and put it in my table instead of of array 1 , array 2 etc.?

I are doing this:

[objdata.data[i].col1

Is objdata.data an object with and attribute of col1?

If you currently have an array of objects that you are looping through then you can just pass that array of objects to Datatables using rows.add() and let Datatables perform the loop.

Did removing .draw() from your loop help the speed?

Kevin

AndyStewart

I have several screens with large datatables (up to 10,000 rows). I found the following worked for me (load time for 10,000 rows approx 5 seconds in Chrome)

CSS definition of:

    .webgrid-table-hidden
    {
        display: none;
    }

In your WebGrid definition, include the CSS from above:

@GridView.GetHtml(
tableStyle: "table table-striped table-bordered table-responsive table-hover cell-border compact webgrid-table-hidden"...

This hides the table on initial load.

Now in the document.ready jquery, add this:

        var GridView = $('#GridView').DataTable({});

        $('#GridView').show();
        GridView.columns.adjust().draw();

I found this significantly improves loading times...

RohanMaladkar

Hi @AndyStewart ,
I got the logic you explain but did not implementation.

@GridView.GetHtml(
tableStyle: "table table-striped table-bordered table-responsive table-hover cell-border compact webgrid-table-hidden"..

exactly how we should hide table?