jquery - jQuery DataTables checkboxes in Fixed Column

Question

I'm using the jquery.datatables plugin along with the FixedColumns add-on and am experiencing some issues keeping the two tables in sync.

The first 2 rows of my table contain checkboxes.

Since the data is ajax loaded I returned "true" or "false" values in the JSON for the checkboxes and I would use fnRowCallback to dynamically create and replace the "true" or "false" with the appropriate checkbox.

Then I added the FixedColumns add-on and although the table initially loads correctly, subsequent redraws do not replace the "true" or "false" values with checkboxes.

Although fnRowCallback still fires, it only has 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 docs it seems FixedColumns doesn't have an fnRowCallback. It only has fnDrawCallback which only fires once after the table it drawn so although I havent tried it I fear it will cause the "true"/"false" to flash before being replaced by checkboxes.

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

Answer 1

There is an discussion about this issue and seems finally solved.

The "trick" to be aware of here is that the FixedColumns are cloned elements, not the originals (which are hidden using the column visibility options of DataTables). When the clones are updated your checked boxes nodes are deleted and then replaced when the originals (note that this is with FixedColumns, not DataTables on its own), thus the issue - the originals haven't been checked the clones were, and now they've gone...

So there are a couple of ways to cope with this - the first would be to have a 'change' event handler for the elements in the clone that when checked will update the originals, so when cloned they will be cloned in the correct state. Another option would be to use a similar event handler and use a whole row select flag, i.e. add a parameter to the TR node or a class to indicate that it is selected, and that can also be used when a clone is done to update the fixed columns. I'm sure there are probably other options as well based on the same principle.

Read more at:

Datatables Forum #1

Datatables Forum #2

Answer 2

I wanted to call JS function when user clicked on checkbox which is available in fixed column header,

I used class value instead of ID

<th id="col1"><input type="checkbox" id="chkall_id" name="chkall_name" value="1" class="chkall_clz"></th>

$('.chkall_clz').change(function () {
    if($(".chkall_clz").is(':checked')){
        alert('Checked');
    }else{
        alert('Not checked');
    }

Answer 3

This code only loops through the cloned items, not the originals.

$('.DTFC_Cloned').find('input[type=checkbox]').each(function() {
        var chkbox = $(this);
       
       // Do what you want with the fixedcolumn cloned elements.
 });