Update row with HTML fragment?

kragh

I have a datatable generated from an HTML table created server-side with a templating system that contains all the logic to render the rows. Is there a way to update a datatables row by passing it a rendered HTML fragment?

colin

To update a row, you need to either call row().data(), or add HTML to the table and call rows().invalidate() for DataTables to rescan the data. Hope that helps,

Colin

kragh

Thanks for the reply. This doesn't seem to work - when I click a sortable header, the previous row info reappears. I tried explicitly passing "dom" to invalidate.

kthorngren

Its hard to say without seeing what you are doing. I built this example to show you various invalidate() methods and to also show how to use row().data().
http://live.datatables.net/cogaqafa/1/edit

Click the Update Brielle button then one of the invalidate buttons. Re-run the example then try another invalidate button. Invalidating one cell will be less overhead than updating all the rows.

Finally re-run the test and click Update Tiger to see the use of row().data(). You can do something similar with cell().data(). You can use row-selector to choose the row or cell-selector to choose the specific cell.

If these examples don't help then please provide a link to your page or a test case replicating the issue so we can help debug. You can update my test case.

Kevin

kragh

Thanks for the example code - I modified it to show what I'm trying to do:

http://live.datatables.net/cogaqafa/7/edit

The "Replace Garrett" button replaces the TDs in Garrett's row with Frank's data, invalidates all rows and redraws - but the new HTML is not parsed/loaded. Garrett's data reappears in the row on redraw.

allan

The problem with the approach you've taken is that you are replacing the HTML elements for the table cells. However, DataTables maintains a reference to the table cell nodes for performance reasons. So it won't actually see your new cells - it still holds the reference to the old ones.

Three options:

• If you need to update the whole row like that, delete the current one (row().remove()) and then add the new one (row.add()),
• Update the content cell by cell and then invalidate the row,
• Use row().data() to update the row.

The latter is the most performant and if you have the data already, is the way I would recommend.

Allan

kragh

I have my code partially working using row().data(). However, I seem unable to update the "data-sort" value.

I'm passing an object to row().data() with an attribute for each cell in the row. The cell data is an object, with a "display" field and a "data-sort" field, as I see in the row data as rendered by datatables.

After the update, the "display" field has been updated but the "data-sort" field still contains the previous value.

Roughly like:

new_cell = {};
new_cell['display'] = 'New content';
new_cell['data-sort'] = 'new content'

new_row = {};
new_row[0] = new_cell;

row().data(new_row);

After this, inspecting the row in the browser shows something like:

<td data-sort="old value">New content</td>

Is it possible to update the data-sort value? Is row().data() expecting cell data in another format?

colin

I didn't notice that data-sort in the example you gave, is this a new requirement? If you're needing HTML5 attribute on the records, and the record set isn't too large, it would be easiest to go with Allan's second approach as that would pick up on the HTML5 info.

Colin

kragh

second approach

This doesn't seem to work for me. For a cell with a 'data-sort' attribute, row.data() gives an object. The same cell accessed via cell.data() returns the inner string content of the td.

Attempting eg:

cell = row.cell(':eq(4)');
cell.data('<td data-sort="new value">New Value</td>');

and inspecting the cell in the browser shows eg:

<td data-sort="old value">New Value</td>

So the data-sort attribute still is not updated.

kthorngren

Try using jQuery attr() to set the data-sort attribute value. See this example:
http://live.datatables.net/kikefeze/1/edit

It uses cell().invalidate() to update the Datatables data cache and sorting. Then draw() to update the table display.

Kevin