Disconnect between modified DOM sourced data and custom render function.

asmxyz

Hello, I'm using data tables for a small project but having trouble with modifying a cell that should use a custom renderer with DOM sourced content.
If the data is in the DOM on page load and table initialization then the custom render function is used, but if I update the table cell via DOM manipulation then the custom render method is not called.

I have a datetime column that I want to contain the full datetime for sorting purposes, but I want to display a shortened friendlier version in the table. I defined the column with columns: [{data: "notified", type: "date", render: renderDate}].

In my Javascript handling the table update if I use dataTable.row("selector").data().notified = updatedDate then the data is never displayed in the table and is lost on a call to invalidate.
If I poke the data into the DOM and call invalidate then the data is in the table but the renderDate custom render function is never called with type = 'display' and the table displays the raw ISO8601 timestamp. This only seems to be an issue with updating a single cell in a table row. Add/remove of whole rows works great.

Am I missing something obvious? Thanks!

kthorngren

I'm not sure why the columns.render display operation doesn't execute when using row().invalidate(). The type and filter operations to execute. See this example:
https://live.datatables.net/bovexoto/1/edit

If you use the row().data() method to update the row data then the display operation does execute. See this example:
https://live.datatables.net/miyicozi/1/edit

To execute both test cases just click a cell in the Position column to see the updates.

Also I think the row().invalidate() with DOM sourced data might try to read the data from the DOM but it looks like you are trying to updated the JS object. In general I believe using the data methods will be better than trying to invalidate.

If you still need help please provide a test case showing what you are trying to do so we can see exactly what you are doing to offer suggestions.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

asmxyz

I created a demo here: https://live.datatables.net/lezozemo/1/

Note how the data value that gets updated doesn't have the render function applied. I've also tried using the row().data() methods but, as you say, then on invalidated the data seems to be reloaded from the DOM and modifications are lost.

EDIT: It looks like I was using the data() API wrong. I had missed that the data cannot be updated in place. <facepalm>. Got it working now!

I'm still curious why the DOM update doesn't work though!

kthorngren

Thanks for the test case. I updated it to select the cell using var td = document.getElementById('target');:
https://live.datatables.net/devexoto/1/edit

As I mentioned it is probably better to use the the data methods. For this case cell().data() might be best. Here is the updated example:
https://live.datatables.net/wazahumi/1/edit

Note I changed the date to 2024-03-23. Its searchable and sortable plus the display operation of columns.render executes with the update.

Kevin