У вас может быть глобальная переменная, в которой будет храниться информация о том, следует ли считать все записи проверенными или нет:
var allChecked = false;
Это значение можно переключить с помощью вашего флажка major (я использовал простой JS addEventListener() вместо jQuery .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 текущее значение:
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);
<!doctype html>
<html>
<head>
<script type="application/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="application/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
</head>
<body>
<table id="example"></table>
</body>
</html>