Replacing rows using AJAX?

greg.blass

I've got a row that I'm replacing using my own separate AJAX calls/callbacks. However, if I replace a tr using an ajax success callback, the table sorting gets messed up (it will put the old row back - it seems to be using a cache).

The rows have data-attributes on them that I use to populate a remote form on the front-end, so I don't seem to be able to use the DataTables API to replace rows (it seems to focus only on the content inside the table cells).

Is there a way to re-initialize the table's cache after an AJAX call, but still keep any sorting/searching that the user has done intact?

greg.blass

It seems that you MUST use the API, but I need to pass an actual tr tag with data attributes, not an array of cell values. Any way to do this?

greg.blass

I'm also trying the invalidate() method but it doesn't seem to be working either.

allan

Use row().remove() to remove and row.add() to add a new one. Alternatively, use row().data() to update the data for a row.

Unfortunately there isn't currently a way to replace the whole tr for an existing row with a new tr. You need to remove the old one and then add the new one. The reason for this is that the rows are uniquely identifiable in the table.

Regards,
Allan

greg.blass

Hey thanks for the reply, much appreciated!

Got it, but the main problem im running into is that I have all this code running in the front-end using data attributes on the actual tr tag, like data-id, data-path, data-action, ... data-whatever, which I'm using for the core functionality on the page on the front-end to populate a remote form with the correct form parameters when a table row is clicked.

I see there is a comment on the bottom of the add API page about using a jQuery object. I'm thinking that would be the way I'd have to go?

Right now I'm saving the table state, destroying the data table, adding the row, then initializing the data table again as a work around, which does seem to do the trick, albeit inefficiently/overkill.

allan

What data do you have? Do you have a new tr element? If so, can't you just delete the old one and add the new one?

Allan

greg.blass

I can, but I have something like this:

<tr data-id="5" data-path="checkins/2" data-action="update" data-first-name="john" data-last-name="smith" data-guest-count="3" data-whatever="this" data-whenever="that"><td>Data</td> ... </tr>

I need those data attributes on the tr tag.

allan

Sure - so use row.add(). You can give it a tr element and it will use it directly.

For example:

myTable.row.add( $(myTrString)[0] ).draw();

Allan