Question

搜索后如何在jQuery DataTable中选中复选框

 $('#column3_search').on( 'keyup', function () {

                table
                    .columns( 1 )
                    .search( this.value )
                    .draw();                                                
                  //Than ckeck on uncheck  checkbox in datatable first column
            } );

Answer 1

我不理解您问题背后的全部逻辑，但是，我认为，遵循 demo 可以提供有关如何完成任务的一般线索；

g++ -std=c++17 6.cpp -o - 6.out

g++ -std=gnu++17 6.cpp -o - 6.out

//table source data
const srcData = [
  {item: 'apple', category: 'fruit'},
  {item: 'carrot', category: 'vegie'},
  {item: 'banana', category: 'fruit'},
  {item: 'squash', category: 'vegie'},
  {item: 'potato', category: 'vegie'}
];
//DataTable object initialization
const dataTable = $('#mytable').DataTable({
  sDom: 't',
  data: srcData,
  order: [1, 'asc'],
  columns: [
    {data: null, orderable: false, render: () => '<input type="checkbox" class="rowselect"></input>'},
    {data: 'item', title: 'item'},
    {data: 'category', title: 'category'}
  ]
});
//Append column search fields
$('#mytable').append(`<tfoot>${[...Array(dataTable.columns().count())].map((td, index) => index>0 ? '<td><input colindex="'+index+'"></input></td>' : '<td><input type="checkbox"></input></td>').join('')}</tfoot>`);
//Total checkbox state
const allChecked = () => {
  if($('#mytable tbody td:eq(0) input:checked').length>0) $('#mytable tfoot [type="checkbox"]').prop('checked', true);
};
//Individual column search
$('#mytable').on('keyup', 'tfoot input', function(){
  dataTable.column($(this).attr('colindex')).search($(this).val()).draw();
  allChecked();
});
//Rows checkbox listener
$('#mytable tbody [type="checkbox"]').on('click', () => allChecked());
//Total checkbox listener
$('#mytable tfoot [type="checkbox"]').on('click', function(){
  $('#mytable tbody [type="checkbox"]').prop('checked', $(this).prop('checked'));
});

jQuery DataTables检查过滤的行复选框

1 个答案: