Question

I'm using server side processing in data table and i'm facing issue for checkbox to checked in all pages. Below is my code, so help me with solution. This is worked only for current page.

$(document).on("ifClicked","#selecAllRec",function(event){
    if(event.currentTarget.checked){
        proCustomerListTbl.api().column(0).nodes().to$().each(function(index){
            $(this).find('.proCustChk').iCheck("uncheck");
        });
    } else {
        proCustomerListTbl.api().column(0).nodes().to$().each(function(index){
            $(this).find('.proCustChk').iCheck("check");
        });
    }
});

Answer 1

您可能具有全局变量，该变量将存储是否应考虑所有条目的检查：

var images = JSON.parse(sessionStorage.getItem('images'));
images.forEach(function(image) {
  dropzone.files.push(image);
  dropzone.emit("addedfile", image);
  dropzone.emit("thumbnail", image, image.dataURL);
  dropzone.emit("complete", image);
});
dropzone.options.maxFiles = dropzone.options.maxFiles - images.length;

可以通过您的 major 复选框切换该值（对于某些扩展选项，我使用普通的JS var allChecked = false;而不是jQuery addEventListener()）：

.on()

然后您可以根据document.getElementById('example').addEventListener('click', event => { if($(event.target).is('thead [type="checkbox"]')){ allChecked = $(event.target).prop('checked'); $('table').DataTable().draw(false); event.stopPropagation(); } }, true);当前值来呈现行复选框：

allChecked

无论如何，这将不允许您对当前数据行进行 mark 标记，但是您可以使用drawCallback: function(){ $(this.api().column(0).header()).html('<input type="checkbox"></input>'); [...$('#example [type="checkbox"]')].forEach(checkbox => $(checkbox).prop('checked', allChecked)); }变量来还原选择服务器端。

以下代码段演示了该方法：

allChecked

//mimic source data
const srcData = [
  {name: 'apple', cat: 'fruit'},
  {name: 'pear', cat: 'fruit'},
  {name: 'carrot', cat: 'vegie'},
  {name: 'cabbage', cat: 'vegie'},
  {name: 'potato', cat: 'vegie'}
];
//initialize global 'allChecked' variable
var allChecked = false;

//initialize datatables
$('table').DataTable({
  dom: 'tp',
  data: srcData,
  pageLength: 3,
  columns: [null, 'name', 'cat'].map(header => ({title: (header || ''), data: header})),
  columnDefs: [{
    targets: 0,
    render: () => `<input type="checkbox"></input>`
  }],
  drawCallback: function(){
    $(this.api().column(0).header()).html('<input type="checkbox"></input>');
    [...$('#example [type="checkbox"]')].forEach(checkbox => $(checkbox).prop('checked', allChecked));
  }
});

//header checkbox click handler
document.getElementById('example').addEventListener('click', event => {
  if($(event.target).is('thead [type="checkbox"]')){
    //assign global variable to current state
    allChecked = $(event.target).prop('checked');
    //trigger table re-draw
    $('table').DataTable().draw(false);
    //prevent click from propagation and swapping column ordering
    event.stopPropagation();
  }
}, true);

Checked all checkbox in all page int datatable server processing

1 个答案: