how to remove a row from a DT rendered via Ajax

yongbum75

I'm using the DataTables inside the jQuery UI Tabs. More importantly, my content is fetched via Ajax. I am able to fetch and display the data exactly how I want it. The problem I'm having is I can't seem to remove rows using fnDeleteRow() method. My entire table (id="my_table") content is brought back via AJAX and therefore my DataTables init method is dynamically bound via the live query plugin. When I run my code (see below) I get a really strange error saying "Cannot read property '_aData' of undefined" at line #126 in jQuery.dataTables.min.js. My guess is that I can't just save the dynamically created instance of my DataTables object into a variable and use that variable to delete an existing row but I'm not 100% sure. When I run the code using a static HTML markup, everything works great. In this case, how would I remove rows? Any insight/assistance would be greatly appreciated!


My HTML code looks something like this:

.....

...
...




My JS code looks like as follows:

var oTable;

$('my_table').livequery(function() {
oTable = $(this).dataTable({
/* dataTable init code goes here */
});
});

$('#button_image_137').livequery('click', function(event) {
/* Make a AJAX call to a server-side PHP script to remove the record with primary key = 137 */
var pos = oTable.fnGetPosition($('#tr_137'));
oTable.fnDeleteRow(pos);
});

dexxxtaz

I've encountered the same problem. Can anybody help?

ruzz

It's probably not this but just as a wild stab in the dark... you're certain that rowIndex is correct? i.e. the thead contains rowIndex zero and tbody contains rowIndexes one through whatever...

allan

What you can do is use fnServerData to "intercept" the json from the server and alter it into whatever format of array you want to pass to DataTables, removing the dodgy data. However, is it not possible to just return a valid array of data?

Also you can change this:

[code]
var pos = oTable.fnGetPosition($('#tr_137'));
oTable.fnDeleteRow(pos);
[/code]
to

[code]
oTable.fnDeleteRow( $('#tr_137')[0] );
[/code]

Allan