I need add "Select all" checkbox in table with using DataTable pligin. I don't found standard method for this and I use addition by manually for this. All Ok, but if I try use localization ('language' property) my "All select" checkbox disappears. I try fix is by add my code in DataTable library, but it is bad way.
<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 handlers of selection on javascript:
devicesTable = $('#devices').DataTable({
// disable sorting first column
'aoColumnDefs': [{
'bSortable': false,
'aTargets': [0] /* 1st one, start by the right */
}],
stateSave: false
});
// Action's 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');
});
Result - all right!:
Add using language for table localization:
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 is reset:
Option orderable
only controls end-user ability to sort the column. This doesn't prevent the column from being sorted programmatically.
Default value for order
option which controls how the table is sorted is [[0, 'asc']]
. Use this option to set initial sorting order other than first column.
For example:
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"
}
});
You need to initialize checkboxes in drawCallback
handler and use delegated event handlers. Otherwise only checkboxes on the first page would work.
Please note that I just copied parts your code related to iCheck plug-in and cannot guarantee that it will work. The important part of the example below is 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');
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With