Arrow sorting is displayed for the first column, even if sorting is disabled

Question

I need to add the “Select All” checkbox in the table using the Pligin DataTable. I did not find a standard method for this, and I use manual addition for this. Everything is fine, but if I try to use localization (the "language" property), then the "Everything selects" checkbox disappears. I am trying to fix this by adding my code to the DataTable library, but this is bad.

<table id="devices" class="table table-striped table-bordered" cellspacing="0" width="100%"> <thead> <tr> <th style="padding:8px; text-align:center;"> <input type='checkbox' class='minimal check-all' id='check-all-device' name='check-all-device'></input> </th> <th>{% trans "STATUS" %}</th> <th>{% trans "DEVICE NAME" %}</th> <th>{% trans "ACTIONS" %}</th> <th></th> </tr> </thead> <tfoot> <tr> <th></th> <th>{% trans "STATUS" %}</th> <th>{% trans "DEVICE NAME" %}</th> <th>{% trans "ACTIONS" %}</th> <th></th> </tr> </tfoot> <tbody id="devices-table-rows"> {% for device in object_list %} {% include "device_add_row.html" %} {% endfor %} </tbody> </table> 

Add selection handlers in javascript:

 devicesTable = $('#devices').DataTable({ // disable sorting first column 'aoColumnDefs': [{ 'bSortable': false, 'aTargets': [0] /* 1st one, start by the right */ }], stateSave: false }); // Action select insert in to search row $('#devices_filter').append($('#devices-actions')); // Settings Check ALL var firstTh = $($($('#devices > thead').find('tr')[0]).find('th')[0]); firstTh.removeClass("sorting_asc"); //iCheck for checkbox and radio inputs $('input[type="checkbox"].minimal, input[type="radio"].minimal').iCheck({ checkboxClass: 'icheckbox_minimal-blue', radioClass: 'iradio_minimal-blue' }); // Check handlers All var checkAll = $('input.check-all'); var checkboxes = $('input.check-single'); checkAll.on('ifChecked ifUnchecked', function(event) { if (event.type == 'ifChecked') { checkboxes.iCheck('check'); } else { checkboxes.iCheck('uncheck'); } }); checkboxes.on('ifChanged', function(event){ if(checkboxes.filter(':checked').length == checkboxes.length) { checkAll.prop('checked', 'checked'); } else { checkAll.removeProp('checked'); checkAll.prop('checked', false); } checkAll.iCheck('update'); }); 

The result is all right !:

Add a language to localize the table:

 var languageUrl = "https://cdn.datatables.net/plug-ins/1.10.11/i18n/Russian.json"; } devicesTable = $('#devices').DataTable({ // disable sorting first column 'aoColumnDefs': [{ 'bSortable': false, 'aTargets': [0] /* 1st one, start by the right */ }], stateSave: false, language: { "url": languageUrl } }); 

My settings reset:

Answer 1

Sorting

The orderable option only controls the end-user ability to sort the column. This does not interfere with the sorting of the column programmatically.

The default value for the order parameter, which controls the sorting of the table, [[0, 'asc']] . Use this option to set the initial sort order different from the first column.

For instance:

 devicesTable = $('#devices').DataTable({ // disable sorting first column 'columnDefs': [{ 'orderable': false, 'targets': 0 /* 1st one, start by the right */ }], order: [[2, 'asc']], stateSave: false, language: { "url": "https://cdn.datatables.net/plug-ins/1.10.11/i18n/Russian.json" } }); 

Checkboxes

You need to initialize the checkboxes in the drawCallback handler and use delegated event handlers. Otherwise, only the checkboxes on the first page will work.

Please note that I just copied parts of your code related to the iCheck plug-in and cannot guarantee that it will work. An important part of the example below is the use of drawCallback and delegated event handlers.

 devicesTable = $('#devices').DataTable({ // disable sorting first column 'columnDefs': [{ 'orderable': false, 'targets': 0 /* 1st one, start by the right */ }], order: [[2, 'asc']], stateSave: false, language: { "url": "https://cdn.datatables.net/plug-ins/1.10.11/i18n/Russian.json" }, drawCallback: function(settings){ var api = this.api(); //iCheck for checkbox and radio inputs $('input[type="checkbox"].minimal, input[type="radio"].minimal', api.table().node()).iCheck({ checkboxClass: 'icheckbox_minimal-blue', radioClass: 'iradio_minimal-blue' }); } }); var table_node = devicesTable.table().node(); $('thead', table_node).on('ifChecked ifUnchecked', 'input.check-all', function(event) { var checkboxes = $('tbody input.check-single', table_node); if (event.type == 'ifChecked') { checkboxes.iCheck('check'); } else { checkboxes.iCheck('uncheck'); } }); $('tbody', table_node).on('ifChanged', 'input.check-single', function(event) { var checkAll = $('thead input.check-all', table_node); var checkboxes = $('tbody input.check-single', table_node); if(checkboxes.filter(':checked').length == checkboxes.length) { checkAll.prop('checked', 'checked'); } else { checkAll.removeProp('checked'); checkAll.prop('checked', false); } checkAll.iCheck('update'); });