How to apply Checkbox "check" to selected after server-side processing?

glimpsed_chaos

Description of problem: Using Select and Bootstrap 5 styling, I am refreshing data periodically from the server using ajax. No issues there, this works as intended.

I also have a method to remember what rows, using a unique data field, that were selected before the refresh. This works and will set the rows as selected.

The following code will perform the above reselection of the previously selected rows. And I can visually see them as selected rows on the datatable. But the check in the checkbox does not appear for those selected rows.

        table.on('draw', function () {
            let preSelectedRows = JSON.parse(localStorage.getItem("selectedRows")) || [];
            if (preSelectedRows != 'undefined' || preSelectedRows != null){
                for (let i = 0; i < preSelectedRows.length; i++) {
                    let preSelectedRow = preSelectedRows[i];
                    table.row((idx, data) => data.eventId === preSelectedRow).select();
                }
            }
        })

The problem I need to resolve is how to reapply the "check" on the checkbox for those selected rows.

I do not see a specific style or class that is being applied/removed when performing this action in the browser and looking at the dev tools.

Any ideas?

kthorngren

Are you doing something like this example for the select checkbox?

On that page open the browser's console and past this statement:

$('#example').DataTable().row(2).select();

Ashton Cox's row is selected and the checkbox is checked.

Depending on how you have the checkboxes configured you may need to use jQuery click() on the checkbox of the appropriate row to not only select the row but to check the checkbox.

If you still need help please provide a simple test case showing how you are using checkboxes with select.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

glimpsed_chaos

@kthorngren Thank you for that. It does work against the example, but in my case it did not.

I ended up changing my code a little bit and found the easiest way was to get the node of the selected row and find the checkbox then set its prop to true.

In case it helps someone:

        table.on('draw', function () {
            let preSelectedRows = JSON.parse(localStorage.getItem("selectedRows")) || [];
            if (preSelectedRows) {
                preSelectedRows.forEach(preSelectedRow => {
                    let row = table.row((idx, data) => data.eventId === preSelectedRow);
                    row.select();
                    $(row.node()).find('input[type="checkbox"]').prop('checked', true);
                });
            }
        });