Datatables: Very slow -> Try ajax sourced table but with html elements or and other ideas?

FrazeColder

Hey

I would like to change the way my website is loading the data for the datatables. The reason for this is that the website needs about 10s finish loading and querying the data. The data I download and get actually don't need that long, moreover its JQuery and JavaScript which need like 80% of the time to build the datatable.

My table has about 2500 records and you are also able to search for data with a drop down field. Now I want to try to load the data with an ajax but my problem is, how can I add html elements to the table?

Cause for each row I have 3 buttons in the last cell of each row to do some actions!

As you can see, I have the problem also on the example below! This is just an example with 1000 rows and even in this example it takes way too long to load completely.

https://jsfiddle.net/jzd241nL/

You guys have any idea on how to speed this up?

glimpsed_chaos

You can add deferRender to your table initialization to help with speed.

https://datatables.net/reference/option/deferRender

For adding HTML, you can do a rowCallback and add those buttons dynamically.

rowCallback: function (row, data) {
   $('td:eq(0)', row).html('<button id="button1"></button>';
}

$('td:eq(0)' - The eq(#) will be in reference to which column your adding html to.

Others with more experience, please correct me if I have misstated.

colin

Hi @FrazeColder ,

This section of the FAQ should help, it discusses various techniques to improve performance,

Cheers,

Colin