I am using the DataTable library. On each page I am displaying 10 rows total. I have 10 records(rows). I have one checkbox button. If I click the 'checkall' button it has to select the 1st page of 10 rows. I then go to the second page and click the 'checkall' button. It has to select the 2nd page of 10 rows.
In total 20 rows has to be checked. However my code is not working like this. Can anyone tell me what is wrong here?
<th><button type="button" id="selectAll"> <span class="selectAllChk">Select All</span> </button></th>
var baseURL = '<?php echo $this->config->item('base_url'); ?>';
$(document).ready(function() {
var allComments = $('#comment-table').DataTable( {
"bStateSave": true,
"processing": true,
"serverSide": true,
"searching": false,
"ordering": false,
"ajax": {
"url": baseURL+"Comments/ajaxHandler",
"type": "POST",
"data": function(d) {
d.method='getAllComments';
$.extend(d, generateField($('#comment-table')));
}
},
"columns": [
{ "data": 'comment' },
{ "data": 'username' },
// { "data": 'status' },
{ "data": 'assignedTo' },
//{ "data": 'userCategory' },
{ "data": 'orgName' },
{ "data": 'commentDate' },
{ "data": 'lastUpdateOn' },
{ "data": 'commentCount' },
{
"data": "actions",
"orderable":false
}
],
"order": [[1, 'asc']]
});
$('#select-all').on('click', function(e) {
e.preventDefault();
$(".sub_chk").prop('checked', $(this).is(':checked'));
});
});
I tried like below code
$(document).ready(function () {
$('body').on('click', '#selectAll', function () {
if ($(this).hasClass('allChecked')) {
$('input[type="checkbox"]', '#example').prop('checked', false);
} else {
$('input[type="checkbox"]', '#example').prop('checked', true);
}
$(this).toggleClass('allChecked');
})
});