Clicking on select all of the checkbox only the particular page is selected .not selecting all pages. Here using jquery. Datatable contains 100s of pages and using that data graph plotting is performed. The data is dynamically loaded. Data in the data table is dynamically loaded.
$('#select-checkbox').on ('click', function (e) {
var rows = mytab.rows({'search': 'applied'}).nodes();
$('input[type="checkbox"]', rows).prop('checked', this.checked);
if (this.checked) {
var data = mytab.rows({'search': 'applied'}).data();
$('input[type="checkbox"]:checked',rows).map(function() {
var $row = $(this).closest('tr');
var rw=mytab.row($row).data();
var $td = $(this).closest('td');
var rd = mytab.cell($td).data();
mytab1.row.add(rw).draw();
Selected_Param_Link.push(rd);
});
} else {
mytab1.rows().remove().draw();
Selected_Param_Link = [];
}
});
// Handle click on checkbox to set state of "Select all" control
$('#hd1 tbody' || '#fv tbody').on('change', 'input[type="checkbox"]', function () {
// If checkbox is not checked
if (!this.checked) {
var el = $('#select-checkbox').get(0);
// If "Select all" control is checked and has 'indeterminate' property
if (el && el.checked && ('indeterminate' in el)) {
// Set visual state of "Select all" control
// as 'indeterminate'
el.indeterminate = true;
}
}
});
Try this
$(document).ready(function(){
function addOnHandler(elem){
elem.on ('click', function (e) {
let rows = mytab.rows({'search': 'applied'}).nodes();
$('input[type="checkbox"]', rows).prop('checked', this.checked);
if (this.checked) {
let data = mytab.rows({'search': 'applied'}).data();
$('input[type="checkbox"]:checked',rows).map(function() {
let $row = $(this).closest('tr');
let rw=mytab.row($row).data();
let $td = $(this).closest('td');
let rd = mytab.cell($td).data();
mytab1.row.add(rw).draw();
Selected_Param_Link.push(rd);
});
} else {
mytab1.rows().remove().draw();
Selected_Param_Link = [];
}
}//addOnHandler
// Handle click on checkbox to set state of "Select all" control
$('#hd1 tbody' || '#fv tbody').on('change', 'input[type="checkbox"]', function () {
// If checkbox is not checked
if (!this.checked) {
let el = $('#select-checkbox').get(0);
addOnHandler(el);
// If "Select all" control is checked and has 'indeterminate' property
if (el && el.checked && ('indeterminate' in el)) {
// Set visual state of "Select all" control
// as 'indeterminate'
el.indeterminate = true;
}
}
});
});