Live updatable cell with complex dom and events

Talagan

Description of problem:

Hi, although I've used datatables for quite a long time, I'm still having a hard time implementing the following scenario :

• Have a cell with data that can be updated live (invalidated with cell().data(new_data))
• Have a complex rendering for this cell (with non-trivial dom, widgets etc)
• Install custom events on these widgets

The problem I'm facing is that I can access the dom in createdCell to install jquery events. But on data invalidation with the cell().data(...) function, when the cell is re-rendered using a custom dom given by the render function (for type display), the cell's dom is squashed and there's no way to re-install events (I could not find any but I may be misleaded).

What I'm looking for is either

• A way to keep the initial dom of the cell on cell().data(new_data), and just patch it (instead of re-rendering it) - the underlying data should change however, so that datatables is able to perform sort operations
• Or a way to access the cell's dom after it is re-render (subsequently of a call to cell().data(new_data)), so that I can install new events

Is this currently possible with datatables?

Thanks a lot !

Ben

kthorngren

Its hard to specifically what to do without seeing more of your code. The recommended way to create events is to use delegated events as shown in this example.

createdRow executes only once which is why the events aren't reapplied. You could use rowCallback, which runs after each table draw, but you will need to remove the page's events before creating them again. Otherwise you will end up applying multiple event handlers to the same element.

If you still need help please provide a link to a test case showing what you are doing so we can provide more specific help.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

Talagan

Thanks Kevin, after struggling a bit, I've realized how this could be implemented using delegated events, even for complex stuff.

I wasn't aware a parent element could 'sniff' for events on its children, even if the children were not yet created.

For the record, I give a small example on how to sniff for events on combo boxes (select) changes inside a datatable, and treat them afterwards, with access to various info on the context, so that a correct processing may be applied afterwards :

the_datatable.on('change', 'td', function (event) {
        let cell    = the_datatable.cell(this);
        let ncell   = cell.node();
        let widget  = event.originalEvent.target;
        let c       = the_datatable_columns[cell.index().column];
        let rowData  = cell.row().data();

      // .... then do your stuff

    });

Thanks again, your answer was really helpful.