Checkbox Select All does not work after deleting a record

AlexanderLamas

Hi all,

I have a table been populated by ajax, with select all option using a checkbox in the first column of the thead.

It works perfectly for all actions.

But, I found a BUG that happens only when deleting one record.
After deleting the record, I refresh the table, calling the ajax again and populating the table again.
After refreshing the feature of selecting all via click on the checkbox on the thead does not work anymore. Actually, it doesn't do anything.

If I refresh the page via browser then it works as usual.

I compare the source code before and after and they are the same.

These are the events.

$('#tblIndex').on('click', '.toggle-all', function (e) {
                    $(this).closest("tr").toggleClass("selected");
                    if ($(this).closest("tr").hasClass("selected"))
                        table.rows().select();
                    else
                        table.rows().deselect();
                });

 }).on('select.dt deselect.dt', function (e) {
                    let numberOfRows = table.rows().nodes().length;
                    let selectedRows = table.rows(".selected").nodes().length;

                    if (numberOfRows === selectedRows)
                        $(".toggle-all").closest("tr").addClass("selected");
                    else
                        $(".toggle-all").closest("tr").removeClass("selected");

                    table.button(0).enable(selectedRows > 0);
                });

when refreshing the table after deleting I'm destroying the table before creating it again.

Do I have to clean up the event somehow? If destroy the table like this, wouldn't clean everything.

$('#mtTable').dataTable().fnDestroy();

Thank you very much in advance.

Regards,
Alex

kthorngren

If all you want to do is reload the data then I suggest you use ajax.reload(), assuming you are using the ajax option. You only need to use destroy() if you want to change Datatables config options.

If you want to use destroy then maybe move the click event into initComplete. Make sure to turn it off, using off() first, before turning it on so you don't run into multiple click events.

If this doesn't help then please post a link to your page or a test case replicating the issue. This will allow us to see what you are doing to help debug.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

AlexanderLamas

Hi Kevin,

Thank you very much for your help.

as you suggested, the

table.ajax.reload();

solved the problem.

Thank you!

Regards,
Alex