我需要使用DataTable pligin在表中添加“全选”复选框.我没有为此找到标准方法,我手动使用添加.好的,但是如果我尝试使用本地化(‘语言’属性),我的“全选”复选框就会消失.我尝试修复是通过在DataTable库中添加我的代码,但这是不好的方法.
<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>
在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');
});
结果 – 没事！：
使用表格本地化语言添加：
var languageUrl = "https://cdn.datatables.net/plug-ins/1.10.11/i18n/Russian.json";
}
devicesTable = $('#devices').DataTable({
// disable sorting first column
'aoColumnDefs': [{
'bSortable': false,stateSave: false,language: {
"url": languageUrl
}
});
我的设置已重置：
解决方法
排序
选项orderable仅控制最终用户对列进行排序的能力.这不会阻止以编程方式对列进行排序.
控制表格排序方式的order选项的默认值为[[0,’asc’]].使用此选项可设置第一列以外的初始排序顺序.
例如：
devicesTable = $('#devices').DataTable({
// disable sorting first column
'columnDefs': [{
'orderable': false,'targets': 0 /* 1st one,order: [[2,'asc']],language: {
"url": "https://cdn.datatables.net/plug-ins/1.10.11/i18n/Russian.json"
}
});
复选框
您需要在drawCallback处理程序中初始化复选框并使用委派的事件处理程序.否则,只有第一页上的复选框才有效.
请注意,我刚刚复制了与iCheck插件相关的代码部分,并不能保证它能够正常工作.以下示例的重要部分是使用drawCallback和委派的事件处理程序.
devicesTable = $('#devices').DataTable({
// disable sorting first column
'columnDefs': [{
'orderable': 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',false);
}
checkAll.iCheck('update');
});
