After refresh all dataTable functions return null

After refresh all dataTable functions return null

smithsmith Posts: 3Questions: 1Answers: 0
edited May 2014 in DataTables 1.9

I am getting a weird error after reloading dataTable, most functions returns null.
I tried 'table.fnDestroy' then 'table.datatable()' but no luck.

Here is the code

var oTable = $('#sample_table').dataTable();

var nRow = $(this).parents('tr')[0];
var aData = oTable.fnGetData(nRow); //works

After table reload

var nRow = $(this).parents('tr')[0];
var aData = oTable.fnGetData(nRow); //returns null

Here is a test case showing the issue : http://jsfiddle.net/smith000monday/GXjks/

Any Ideas?

Thanks.

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin
    Answer ✓

    $('#sample_editable_1 >tbody').replaceWith(ajaxHtml);

    You need to use the API to update the table. DataTables doesn't have any idea that you've modified the HTML directly. See the FAQs: http://datatables.net/faqs/#append

    Allan

  • smithsmith Posts: 3Questions: 1Answers: 0
    edited May 2014

    Why is it re-initializing the table after the external change wont work?

    $('#sample_editable_1 >tbody').replaceWith(ajaxHtml)
    oTable.dataTable()
    
    var nRow = $(this).parents('tr')[0];`
    var aData = oTable.fnGetData(nRow); //returns null
    
  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin
    edited May 2014

    Have you destroyed the old table first? If not, You need to do that. Do it before you nuke the HTML.

    Allan

  • smithsmith Posts: 3Questions: 1Answers: 0
    edited May 2014

    Yes I did but still returns null

                    oTable.fnDestroy();
                                  
                    $('#sample_editable_1 >tbody').replaceWith(ajaxHtml);
                    oTable = $('#sample_editable_1').dataTable()
    

    here is modified show case jsFiddle

This discussion has been closed.