Multiple Instances of DataTables slowing each other down?
Multiple Instances of DataTables slowing each other down?
Visionstar
Posts: 7Questions: 1Answers: 0
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!
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!
This discussion has been closed.
Replies
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();
});
}
"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
Thanks for your Answer, i sent you a PM with the application.
If you have any questions, just let me know
Thanks,
Visionstar
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!
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!