check box in datatable ajax processing

Question

I have a datatable with ajax processing.I have a checkbox at every row for multiple delete.And also a checkbox on the top to check all the checkbox at once. I need to know the checked rows and unchecked to delete.

For example If i select my top checkbox it automatically change all checkbox into checked using this code

 $('#select-all').click(function (event) {
        if (this.checked) {
            // Iterate each checkbox
            $(':checkbox').each(function () {
                this.checked = true;
            });
        } else {
            $(':checkbox').each(function () {
                this.checked = false;
            });
        }
    });

But it only effect for current page I have more than 3000 pages.What will I do?

JS for server side processing

 var dataTable = $('#example2').DataTable({
        processing: true,
        serverSide: true,
        ajax: "?p=online_user_ajax" // json datasource

    });

JSON return is like this

$i = 1;
while ($row = mysql_fetch_array($query)) {  // preparing an array
$actions = '<button class="btn btn-small btn-edit" id="edt_user" ></button>';
$checkbox = '<input type="checkbox">';
$nestedData = array();
$nestedData[] = $checkbox;
$nestedData[] = $i;
$nestedData[] = $row["email"];
$nestedData[] = $row["mobile"];
$nestedData[] = $row["first_name"];
$nestedData[] = $row["last_name"];
$nestedData[] = $actions;

$data[] = $nestedData;
$i++;
}
$json_data = array(
"draw" => intval($requestData['draw']), // for every request/draw by clientside , they send a number as a parameter, when they recieve a response/data they first check the draw number, so we are sending same number in draw.
"recordsTotal" => intval($totalData), // total number of records
"recordsFiltered" => intval($totalFiltered), // total number of records after searching, if there is no searching then totalFiltered = totalData
"data" => $data   // total data array
);

echo json_encode($json_data);  // send data as json format

For better understanding I am adding two images

Checkboxes are checked when I click top checkbox

Checkboxes are unchecked in Second Page

If you have any idea to recover this problem please help.

Answer 1

Ok Sanooj, try this: whenever a user clicks on the next or previous button, do this:

$(".page-btn").click(function(){
       $('#selectAll').attr('checked', false);
})

Alternate

$(".page-btn").click(function(){
       $('#selectAll').prop('checked', false);
})

Lets say that your next and previous buttons have a common class page-btn, it will detect your click and uncheck the top checkbox, which doesn't get updated whenever the next/previous page data is loaded. You need to update that checkbox whenever new page data is loaded.

Answer 2

I would register a listener to #selectAll:

$("#selectAll").change(function(){
    if ($(this).is(":checked")) {
        $(".your-class").prop("checked", true);
    }
});

On page change, trigger the event

$(".page-change").click(
     $("#selectAll").trigger("change");
)