Jquery datatable with checkbox in header and in row:select all checkbox not working

Question

I am using Jquery Datatable. I want to have a first column with header and rows with a checkbox and should toggle the selection of header checkbox with remaining row's checkboxes. I have below implementation.

Datatable attribute

  "aoColumns": [{ "sTitle": "<input type='checkbox' id='selectall' onclick='toggleChecks(this);' ></input>", "mDataProp": null, "sWidth": "20px", "sDefaultContent": "<input type='checkbox' ></input>", "bSortable": false },null,null,null,null,null,null]

Datatable row

<td><input type="checkbox' class="case"></input></td>

Javascript function

  function toggleChecks(obj)
    {
        $('.case').prop('checked', obj.checked);
    }

This is worked fine when i am on single page. But when I do the paging then checkboxes remain unchecked for other page. How to achieve this for behaving consistently for all checkboxes. Please assist.

Answer 1

I have done something like,

$('#selectall').change(function() {
                        var isSelected = $(this).is(':checked');
                        if(isSelected){
                            $('.case').prop('checked', true);   
                        }else{
                            $('.case').prop('checked', false);
                        }
                    });

on document ready.