Select All checkbox in Datatables inverted operation

Question

This is for an open source project I created for a K12 school. Please see the following:

http://users.sch.gr/chertour/projectsms/sms_list_ajax_demo.html

You will find:

Server-side data fetched and embedded into a Datatable
jQuery DataTables Checkboxes plugin for using checkboxes with jQuery DataTables.

The JS code:

$(document).ready(function() {
    var table = $('#students').DataTable({
        "processing": true,
        "serverSide": true,
        "ajax": 'students_list_db_sms_send.php',

        responsive: {
            details: {
                type: 'column',
                target: 'tr'
            }
        },
        'columnDefs': [{
            targets: 0,
            "checkboxes": {
                "selectRow": true
            }
        },
            {
                targets: 1,
                className: 'details-control',
                "orderable": false,
                "data": null,
                "defaultContent": ''
            }
        ],
        'select': {
            'style': 'multi'
        },
        'order': [
            [2, 'asc']
        ]
    });

    $('#students tbody').on('click', 'input[type="checkbox"]', function() {
        var tr            = $(this).closest('tr');
        var rowData       = table.row(tr).data();
        var rows_selected = table.column(0).checkboxes.selected();

        $('#sms_names').text('');

        $.each(rows_selected, function(index, rowId) {
            $('#sms_names').append(' ' + rowId);
        });

    });

    /************************************THIS IS FROM THE FOLLOWING FIDDLE*****************************************/
    /* https://jsfiddle.net/snqw56dw/466/  */

    $('#students').on('init.dt', function() {
        $('#students thead th input[type="checkbox"]').on('click', function(e) {
            var rows_selected = table.column(0).checkboxes.selected();

            $('#sms_names').text('');
            $.each(rows_selected, function(index, rowId) {
                $('#sms_names').append(' ' + rowId);
            });
        });
    });
});

The corresponding HTML is:

<body>

<hr>
<table id='students' class='display' width='100%' cellspacing='0'>
    <thead>
        <tr>
            <th></th>
            <th></th>
            <th>name</th>
            <th>surname</th>
            <th>fathers name</th>
            <th>date</th>
            <th>tel</th>
            <th>class</th>
        </tr>
    </thead>
</table>

<span id="sms_names"></span>

</body>

I have enabled the first row as the checkboxes row.

When I click in a checkbox the rowID is printed in a <span> element. Multiple checkboxes printed as expected.
When I press the "Select All" checkbox, the checkboxes are all selected but nothing is printed.
When I toggle ("Select All" checkbox UNSELECTED) then every value is printed.

It is supposed to be the other way around. I have tried numerous variations but to no avail. Is there something I missed? Any ideas or suggestions are greatly appreciated.

Gyrocode.com · Accepted Answer · 2017-10-04 16:02:28Z

5

The problem is in your click event handler, it fires before Checkbox plug-in has a chance to update list of selected checkboxes.

Use columns.checkboxes.selectCallback to handle select/deselect event for checkboxes.

For example:

$(document).ready(function() {
   var table = $('#example').DataTable({
      'ajax': 'https://api.myjson.com/bins/1us28',
      'columnDefs': [
         {
            'targets': 0,
            'checkboxes': {
               'selectRow': true,
               'selectCallback': function(){
                  printSelectedRows();
               }
            }
         }
      ],
      'select': {
         'style': 'multi'
      },
      'order': [[1, 'asc']]
   });   
});

// Print selected rows
function printSelectedRows(){
   var rows_selected = $('#example').DataTable().column(0).checkboxes.selected();

   // Output form data to a console     
   $('#example-console-rows').text(rows_selected.join(","));
};

See this example for code and demonstration.

answered Oct 4, 2017 at 16:02

Gyrocode.com

59k16 gold badges157 silver badges192 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Konstantinos Chertouras Over a year ago

Many thanks for the reply and the post edit. I greatly appreciate.

Gyrocode.com Over a year ago

@KonstantinosChertouras, glad that the Checkbox plug-in is useful for you. You make a great point, I will add this use case to the documentation.

Deepa MG Over a year ago

@Gyrocode.com What if i want to unselect all using jquery? That dont call selectCallback and the list dont update.

Deepa MG Over a year ago

@Gyrocode.com In short. $('input[type="checkbox"]', table.cells().nodes()).prop('checked',false); is not impacting on selectCallback .

Collectives™ on Stack Overflow

Select All checkbox in Datatables inverted operation

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related