Multiple Instances of DataTables slowing each other down?

Visionstar

Hey there!

i'm not sure if somebody has already asked this one, but i could not find anything after searching in google for a couple of hours and in this forum.
I have this strange issue with Datatables. My situation is:

-) It's a Single Site Application
-) Multiple Tables on different div's, which i hide and show with the style-setting "display:none"
-) Every table initializes, when it's needed (e.g. user clicks on a link in the navigation)
-) One Table has about 2500 Rows, the other ones (about 5-6 Tables) have 10 Rows

The Plugin works really nice when i have only those small Tables initiated, but once i load/initialize the 'big' table, every other table also takes about 1-2 seconds to initialize, which does not happen, when i haven't loaded the 'big' table. The small tables usually initiate 'instantly', when the big one isnt initiated.

My code for the initialization of the big table is:
{ "bProcessing": true,
"bPaginate": true,
"aoColumns": [
{ "bSearchable": false, "bVisible": false, "mData": "ROWNUM" },
{ "mData": "ID", "mRender": addButtonsListeEA },
{ "sType": "date-eu", "mData": "DATE_RETRIEVED" },
{ "mData": "DESCR" },
{ "mData": "BW", "sType": "formatted-num", "sClass": "alignRight" },
{ "mData": "BW_F", "sType": "formatted-num", "sClass": "alignRight" },
{ "mData": "PRICE", "sType": "formatted-num", "sClass": "alignRight" },
{ "mData": "KAT_NAME" }
],
"bSortClasses": false,
"aoColumnDefs": [{
"aTargets": [4, 6], "fnCreatedCell": setColor
}],
"aaSorting": [[0, "asc"]],
"sAjaxSource": "Default.aspx/loadList",
"sAjaxDataProp": "Rows",
"bDeferRender": true,
"fnServerData": getJSONFromDB
}

For the other tables it is without sAjaxsource, only something like this:
{ "aoColumns": [
{ "bSearchable": false, "bVisible": false },
null,
null,
null,
{ "sType": "date-eu" }
],
"aaSorting": [[0, "asc"]]
}

my getJSONFromDB-function:

function getJSONFromDB(sSource, aoData, fnCallback) {
$.ajax({
"dataType": 'json',
"contentType": "application/json; charset=utf-8",
"url": sSource,
"type": "POST",
"data": aoData,
"success": function (ret) {
var json = JSON.parse(ret.d);
fnCallback(json);
}
});
}

DataTables perfectly fits my needs, except for that lag in the initialization-part.
Everything works fine, once the table is initialized, but for my application i cant accept the time it takes, to init the tables, once a big table has been loaded.

Do you have any Idea why that happens and could give me some tips?

Thanks!

Visionstar

Hey guys!

I already found the solution for this problem!
I extended my initialization with the following:
"bRetrieve": true,
"bDestroy": true
and also added a function which destroys every table when i load another table.

(The Documentation wasn't clear about what those parameters mean [or it was my mistake :)])

I appreciate the work on this plugin, it's awesome!

PS: that is my destroy function:


function destroyAllDataTables() {
var tables = $.fn.dataTable.fnTables();

$(tables).each(function () {
$(this).dataTable().fnDestroy();
});
}

allan

[quote]
"bRetrieve": true,
"bDestroy": true
[/quote]

These two are mutually exclusive. Do you want to retrieve the existing object, or destroy it? That's what the two do - adding them not is undefined behaviour.

The answer is no they shouldn't effect enough other. We'd need to see a test case to understand what is happening.

Allan

Visionstar

Hi allan!

Thanks for your Answer, i sent you a PM with the application.

If you have any questions, just let me know

Thanks,
Visionstar

Visionstar

Since i could not resolve this problem and still think that it is an issue:

I recreated it on http://epu.comis.at
when you try to load a small list (e.g. in Navigation "Userverwaltung" --> "Produktkategorien")
The big table is in "Finanzen --> E/A".

When i load E/A first, and then open "Finanzen" --> "AfA" then, all other initializations take more than they usually take.

When i dont open E/A at all, the others lists just load fine.

I have set "bRetrieved":true at the moment, and i dont destroy any datatables, when i initialize another.

Does anyone know, how i can fix this? Do i really have to destroy and reinitialize the tables every time?
Also: I use sAjaxSource only for the big list (EA), do i need to load that one every time too, or is there any other trick to save the state with pagination etc (because reinitializing reloads the table, which i didn't plan to do =/)

If you need any other Informations, just let me know!
(The initialization happens in /_Scripts/master.js, the default parameters are changed in /_Plugins/datatables/js/datatables.erweiterungen.js

Thanks for your help!

Visionstar

Hi again!

I solved the problem!
It wasnt the datatables-plugin which caused the loading-problem but some self-written javascript code, which i have to debug now :P

I just wanted to let you all know that, thanks for your help!