DataTables Select: No Responsive +/- Icon when Checkboxes Displayed in Truncated View

Eugene_B

I'm using DataTables-Select with CSS-drawn checkboxes.

I notice that when I resize the window in Responsive mode, I don't see the +/- icons; the checkbox serves that purpose. Is that by design? The only way to see the hidden content is to click the Checkbox?

One other question: How would I capture the Responsive Mode-ON / Mode-OFF Event? Suppose in one case, the table is resized into the Responsive mode with some hidden content. I need to have some code that runs in that case. Then, the table is brought back into the Full mode. I also need some separate handler I need for that.

...

        let example = $('#example').DataTable({
            columnDefs: [{
                orderable: false,
                className: 'select-checkbox',
                targets: 0
            }],
            select: {
                style: 'os',
                selector: 'td:first-child'
            },
            order: [
                [1, 'asc']
            ]
        });

kthorngren

I notice that when I resize the window in Responsive mode, I don't see the +/- icons; the checkbox serves that purpose. Is that by design? The only way to see the hidden content is to click the Checkbox?

You are trying to use the same column for two purposes; one for the slect checkbox and one for Responsive. Both have click events doing different things. You could add another column and have the responsive icons in column 0 then the checkbox in column 1, something like this:
http://live.datatables.net/capecuto/1/edit

Or you could move the responsive column control to another column, like this example.

How would I capture the Responsive Mode-ON / Mode-OFF Event?

The responsive-resize will fire when column visibility has changed.

Kevin

Eugene_B

Thank you, I have one more question: When I click +/-, or maximize the window, I see that the "parent" CSS is correctly dropped.

But the "parent" CSS is NOT dropped when I resize the window with e.g. the Maximize button. Any reason for that?