Unable to perform multiple checkbox select if the table select style set to OS

[shanakaperera]

Below shows my datatable code so far :

$("#my-table").DataTable({
        "serverSide": true,
        "processing": true,
        "ajax": {
            "url": "http:\/\/example.test\/example",
            "type": "GET",
            "data": function (data) {
                // ...
            }
        },
        "columns": [{
            "data": "id",
            "name": "id",
            "title": "",
            "orderable": false,
            "searchable": false
        }, {
            "data": "name",
            "name": "name",
            "title": "Name",
            "orderable": true,
            "searchable": true
        }, {
            "data": "salary",
            "name": "salary",
            "title": "Salary",
            "orderable": false,
            "searchable": false
        }, {
            "data": "pay_date",
            "name": "pay_date",
            "title": "Pay Date",
            "orderable": false,
            "searchable": false
        }, {"data": "status", "name": "status", "title": "Status", "orderable": false, "searchable": false}],
        "columnDefs": [{"targets": 0, "checkboxes": {"selectRow": true}}],
        "dom": "Bfrtip",
        "ordering": false,
        "select": {"style": "os"},
        "pageLength": 20,
        "responsive": true
    });

I have included your plugin into my table and it is seems to be working fine. But there is a very small problem that does satisfy my need. I don't want to set the table select style to multi since I am using row selection for loading data into another form. So the multi selection behavior does not meet my requirement here. But I need your checkbox selection method to delete data from the table. Maybe all the rows from the table . In that case, selecting the checkbox in the column header works fine. But when I try to select required check-boxes which are related to the rows I am willing to delete, multi-selection cannot be achieved. Previously selected checkbox is unchecked.

Any suggestions for resolve this issue would be grateful.

[diesl]

I face the same problem. I need to use select style os, but checkbox behaviour is broken in this case.

I created a JSFiddle to show the error: https://jsfiddle.net/nfzvgy3u/

[mpryvkin]

@diesl, thanks for the example.

I don't see a problem here. Checkboxes extension inherits selection style used by Select extension. According to the Select extension documentation:

Operating system (os) style - where a single click will select a single item only, deselecting any others that were previously selected, a shift click will select a range of items and a ctrl / cmd click will add and remove items from the selection.

These keys work for me when working with multiple selections when style is set to os, i.e. holding ctrl key and clicking the rows will allow to select multiple rows.

It would be impossible now to have Select extension use style set to os and have Checkboxes extension behave as in multi selection style.

[diesl]

In general I agree with you and everything works as intended as you describe it. However, when looking specifically at the checkbox itself, the behaviour feels unnatural for me.

Consider you have some rows selected and then

• want to deselect one row by clicking its checkbox
• want to select another row by clicking its checkbox

Currently this is not possible and clicking the checkbox selects this row alone.

I have to admit that that DataTables does not handle this "correctly" (imho) too, but maybe it is limited by the pseudo CSS implementation of the checkboxes. Speaking of os, Windows Explorer can handle the described scenario.

Checkboxes implements the selection differently by using real checkboxes, so my impression was that a different and more "correct" behaviour/implementation would be possible.

[mpryvkin]

@diesl I understand your case and you're right, it might be useful. I tried Windows Explorer with "Item check boxes" option enabled and it behaves like you described.

This is not currently possible but I will see what can be done.

[diesl]

@mpryvkin Wow, thanks for the quick implementation 👍

For reference, I posted the same question to DataTables Forum about implementation in native select extension: https://datatables.net/forums/discussion/68796/select-style-os-and-behaviour-of-checkbox

[mpryvkin]

Thanks for the link. I wasn't aware of the style: 'multi+shift' option which is another alternative solution to this problem.