After refresh all dataTable functions return null

smith

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.

allan

$('#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

smith

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

allan

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

Allan

smith

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