Multiple Instances of DataTables slowing each other down?

Multiple Instances of DataTables slowing each other down?

VisionstarVisionstar Posts: 7Questions: 1Answers: 0
edited September 2013 in DataTables 1.9
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!

Replies

  • VisionstarVisionstar Posts: 7Questions: 1Answers: 0
    edited September 2013
    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();
    });
    }
  • allanallan Posts: 63,381Questions: 1Answers: 10,449 Site admin
    [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
  • VisionstarVisionstar Posts: 7Questions: 1Answers: 0
    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
  • VisionstarVisionstar Posts: 7Questions: 1Answers: 0
    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!
  • VisionstarVisionstar Posts: 7Questions: 1Answers: 0
    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!
This discussion has been closed.