dataTable trigger event for select all rows

AlexanderLamas

Hi guys,

Does anyone know how to implement an event to be triggered when you click on the checkbox "select all" in the header of the DataTable to select all records?

These is the code I've implemented so far. For some reason the "$('#myTable').on('click', '.toggle-all', function (e)" is not working properly.

let table = $("#myTable").DataTable({
...
...
...
}).on('select.dt deselect.dt', function (e) {
    let numberOfRecords = table.rows().nodes().length;
    let selectedRows = table.rows(".selected").nodes().length;

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

    table.button(0).enable(selectedRows > 0);
    table.button(1).enable(selectedRows === 1);
    table.button(2).enable(selectedRows === 1);
});


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

I believe it would be more reliable to use an event directly from the dataTable API.

Any help appreciated!

Thank you very much in advance.

Regards,
Alex

kthorngren

Looks like you want to toggle the row selection instead of selecting all or deselecting all. Is this correct? If so I would take a different approach, see this example:
http://live.datatables.net/qaqoguva/1/edit

Using the selector-modifier of {selected:true} the click event first gets the selected rows and deselected rows. Actually it gets the row nodes using rows().nodes(). Then it uses the row-selector of node to define the rows to for rows().select() and rows().deselect().

Kevin

AlexanderLamas

Hi @kthorngren ,

Thanks for your response.
I'm sorry for the late reply.

I saw the sample you posted, but actually, I want to keep the select and deselect all been triggered via checkbox in the header of the table.

My point is to instead of having to code a function, like this

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

I could use an event, like this

}).on('select.dt deselect.dt', function (e) {
    let numberOfRecords = table.rows().nodes().length;
    let selectedRows = table.rows(".selected").nodes().length;
 
    if (numberOfRecords === selectedRows)
        $(".toggle-all").closest("tr").addClass("selected");
    else
        $(".toggle-all").closest("tr").removeClass("selected");
 
    table.button(0).enable(selectedRows > 0);
    table.button(1).enable(selectedRows === 1);
    table.button(2).enable(selectedRows === 1);
});

But specific to be trigger when I click on the header checkbox.

The event sample above "select.dt deselect.dt" only works when you click in the checkbox for the table body.

Is it possible to have an event to be trigger when click on the header checkbox?

Thanks again!

Regards,
Alex

kthorngren

Here is a Datatables checkbox/select plugin that includes a checkbox in the header for select/deselect all.
https://www.gyrocode.com/projects/jquery-datatables-checkboxes/

Or you can checkout this example:
http://live.datatables.net/yuzabema/1/edit

Is this what you are looking for?

Kevin

AlexanderLamas

Hi @kthorngren ,

Thank you very much for your reply.
Ideally, the first example you sent me is what I'm looking for.
I just didn't want to make another reference to help me on that.
It would be nice to do something like it just using purely dataTable API.

The second example is what I currently have, and it works well.

So, please let me know if there is a way to put the code in this method

$('#myTable').on('click', '.toggle-all', function (e) {
...
});  

inside of dataTable API event.

Thank you very much!
Much appreciated your help.

Regards,
Alex