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:
1 Answers
Answers 1
Sorting
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" } }); Checkboxes
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'); }); 
0 comments:
Post a Comment