JQuery DataTables flags in fixed column

Question

I use the jquery.datatables plugin along with the FixedColumns add-in and am experiencing some problems keeping two tables in sync.

The first 2 rows of my table contain checkboxes.

Since the data was uploaded using ajax, I returned the “true” or “false” values ​​in the JSON for the flags, and I would use fnRowCallback to dynamically create and replace the “true” or “false” corresponding flag.

Then I added the FixedColumns add-in and, although the table initially loaded correctly, subsequent redraws do not replace the “true” or “false” values ​​with the flags.

Although fnRowCallback still fires, it has only part of the table and only part of the data

Note this code is in TypeScript but resembles JS closely enough to understand without knowing it

  fnRowCallback: (row : DataTables.Settings, data: any[], displayIndex: number, displayIndexFull: number) : void => { if($(row).children("td.checkboxColumn").length > 0){ var isFlaggedIdentifier = 'isFlaggedCheckbox_' + displayIndexFull; var isFlaggedCheckbox = $('<input />', { type: 'checkbox', id: isFlaggedIdentifier, 'class': 'tableCheckboxInput', value: isFlaggedIdentifier }); var isFlaggedLabel = $('<label />', { 'for': isFlaggedIdentifier, 'class': 'tableCheckboxLabel' }); var isFlagged: bool = $(row).children("td").eq(1).text() === "TRUE"; var flaggedCheckboxEntry = $(row).children("td").eq(1); if(flaggedCheckboxEntry.hasClass("checkboxColumn")){ flaggedCheckboxEntry.html(isFlaggedCheckbox); flaggedCheckboxEntry.append(isFlaggedLabel); } } } 

According to the docs, it seems that FixedColumns does not have fnRowCallback . It has only fnDrawCallback , which only fires once after a table drawn like this, although I have not tried to fix it. I am afraid that this will cause true / false to flash before replacing the checkboxes.

If this assumption is true, what can I do to replace the checkboxes before rendering the table.

Answer 1

This issue is being discussed and seems to be finally resolved.

The “trick” to be aware of is that FixedColumns are cloned elements, not originals (which are hidden using the visibility parameters of the DataTables columns). When the clones are updated, your marked box nodes are deleted and then replaced with the originals (note that this is using FixedColumns and not with DataTables yourself), so the problem is that the originals were not checked, the clones were, and now they are gone ...

So, there are several ways to deal with this - the first will have a "change" event handler for elements in the clone, which will update the originals during verification, so when they are cloned, they will be cloned to the correct state. Another option is to use a similar event handler and use the whole row select flag, i.e. Add a parameter to the TR node or class to indicate that it is selected, and which can also be used when the clone is running to update fixed columns. I am sure that there are probably other options based on the same principle.

More details:

Datatables Forum # 1

Datatables Forum # 2