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.

Yes it is server side data with ajax (only show 10 rows at a time) — Sanooj T
– Sanooj T, Commented Aug 30, 2016 at 9:44
Actually, is the pagination AJAX is my question that is when you go to next page, does the page reloads? — Abhishek Dhanraj Shahdeo
– Abhishek Dhanraj Shahdeo, Commented Aug 30, 2016 at 9:47

Abhishek Dhanraj Shahdeo · Accepted Answer · 2016-08-30 09:56:22Z

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.

answered Aug 30, 2016 at 9:56

Abhishek Dhanraj Shahdeo

1,3662 gold badges14 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Anthony Poon · Accepted Answer · 2016-08-30 10:25:51Z

1

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");
)

edited Aug 30, 2016 at 10:25

answered Aug 30, 2016 at 9:45

Anthony Poon

8876 silver badges14 bronze badges

Comments

Sanooj T · Accepted Answer · 2016-08-31 04:25:58Z

1

Finally I resolved the problem by sending the top checkbox value into server side.

$checkbox='<input type="checkbox">';
if (!empty($requestData['columns']['checkbox']['search']['value'])) {
    $checkbox='<input type="checkbox" checked>';
} 
$nestedData = array();
$nestedData[] = $checkbox;
$nestedData[] = $i;
$nestedData[] = $row["email"];
$nestedData[] = $row["mobile"];
$nestedData[] = $row["first_name"];
$nestedData[] = $row["last_name"];
$nestedData[] = $actions;

So if the top checkbox checked all the other checkbox will be checked

answered Aug 31, 2016 at 4:25

Sanooj T

1,3471 gold badge14 silver badges27 bronze badges

Collectives™ on Stack Overflow

check box in datatable ajax processing

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related