IE8 + fnDestroy(), DataTables 1.8.2, jQuery 1.6.2

IE8 + fnDestroy(), DataTables 1.8.2, jQuery 1.6.2

isilweoisilweo Posts: 1Questions: 0Answers: 0
edited September 2011 in Bug reports
Hey,


i was fighting today with error on IE8 when doing fnDestroy() and i tracked down bug. Problem happens when you have 2 tables next to eachother inside other element. ie
[code]




[/code]

now when you make data table on both like $("#t1").dataTable() and try to destroy one of them you got error. the error happens in line 2234 on DataTables 1.8.2

[code]
if ( oSettings.nTableReinsertBefore )
{
nOrig.insertBefore( oSettings.nTable, oSettings.nTableReinsertBefore ); //<---- here
}
[/code]

when both tables are sorounded by their own div's everything seems to be ok. like example below
[code]








[/code]

demos you can check this behavior

http://www.unitedbytes.pl/tmp/datatables/index.html - here is with the bug. click "click me" button
http://www.unitedbytes.pl/tmp/datatables/index_ok.html - here tables are sorounded by DIVs and it is ok

----
as an explanation of why i found this.
i use two tables that compares data from diffrent time periods. But data loaded inside have sometimes 3 and sometimes 4 columns. Data is loaded using ajax so i need to recreate tables. to recreate i use fnDestroy() and after that .empty()

greetings
isilweo

Replies

  • elemarioselemarios Posts: 1Questions: 0Answers: 0
    hi, i am using 1.8.1 version and have the same problem only with IE , works fine in Chrome and FireFox. but i do have not 2 tables consecutives, are completly separated. Unfortunately still cant fix it. This is my code as example.
    [code]
    ....


    Some text







    Some text





    ......

    //
    ......
    oTable=$("#t1").dataTable({....});
    ......
    ......
    if (typeof oTable!= 'undefined')
    {
    oTable.fnDestroy();
    oTable= undefined;
    }
    [/code]
  • psen01psen01 Posts: 1Questions: 0Answers: 0
    edited October 2011
    I am facing exactly same issue, I have three tables and all 3 are in their own containers. From the first table an AJAX call is initiated and I hide and show one of the other table based upon row selection as the content and styling is entirely different for both. I am using bDestroy: true with datatables 1.8.2, firefox and chrome it works fine without any errors in the logs but in IE8 when some dom manipulation is performed in one table and bDestroy is called it fails at that point as mentioned above with the error

    Invalid argument.

    [code]
    if ( oSettings.nTableReinsertBefore )
    {
    nOrig.insertBefore( oSettings.nTable, oSettings.nTableReinsertBefore ); //<---- here
    }
    [/code]
  • SairusSairus Posts: 4Questions: 0Answers: 0
    edited April 2012
    Having the same issue with multiple tables and Datatables 1.9.1 in IE 9 - SCRIPT87: Invalid argument.
    aoData[i].nTr.insertBefore(
    aoData[i]._anHidden[iCol],
    _fnGetTdNodes( oSettings, i )[iBefore] );
  • npostulartnpostulart Posts: 1Questions: 0Answers: 0
    Had the same issue with just one dataTable.
    After long debugging we figured out that IE8 searches for the nextSibling of the table after destroy.
    Chrome takes the line-break after the table as the sibling element to place the new table before. IE8 just seems to don't find anything but takes an iFrame as the sibling. As there is no iFrame to insert the table before the script would break down.
    A fix for this to work properly in IE8 is to define an empty div after the table, so IE8 can find a proper sibling.
This discussion has been closed.