DataTable serverside process how to remeber checked boxes on pagination

Question

How to remeber checked boxes values with paging. when i checked values on 3 pages. it only storing last page values and other values removing.

i used below with client side processing .

$('.button').click(function () {
    var id = "";
    var oTable = $("#example").dataTable();
    $(".checkboxClass:checked", oTable.fnGetNodes()).each(function () {


    });
});

Probative

It won't work. Because if click next page in pagination it will remove previous page elements in DOM and replace with new elements. So that we can't read the checkbox values. – Fug

Answer 1

Check out jQuery DataTables Checkboxes extension and server-side processing example, where state of checkboxes is preserved.

For example:

var table = $('#example').DataTable({
   'processing': true,
   'serverSide': true,
   'ajax': '/lab/jquery-datatables-checkboxes/ids-arrays.php',
   'columnDefs': [
      {
         'targets': 0,
         'checkboxes': {
            'selectRow': true
         }
      }
   ],
   'select': {
      'style': 'multi'
   },
   'order': [[1, 'asc']]
});

We are also working on adding state saving/loading capability very soon which will allow to preserve state of checkboxes between page reloads.

Agonized

how to push rowID s to an array where i can use later – Probative

Answer 2

could you please use the value in to session-storage rather than var id = "" .

Soilasoilage

Session storage?? – Fug

Answer 3

It won't work. Because if click next page in pagination it will remove previous page elements in DOM and replace with new elements.

But we can store in array then use it in ajax.

var checkedArray=[];
$(document).on('change','.checkboxClass',function(){
  if( $(this).is(':checked') )
   {
     //if checked add to array 
     checkedArray[checkedArray.length]=$(this).val();
   }else{
    //If unchecked remove the value from the array
    var index=checkedArray.indexOf($(this).val());
    if (index > -1) {
    checkedArray.splice(index, 1);
   }
 }
});

//then you can use it in click event
$('.button').click(function () {
var id = "";
//read checkedArray using for loop

});

Working Fiddle: http://jsbin.com/fewigaxesa/edit?js,console,output

Fug

Comments are not for extended discussion; this conversation has been moved to chat. – Gilolo

@Sarath Kumar : this is not working for below scenario. Im checked in single checkbox. and then i toggle checked all in same page, toggle unchecked all in the page. but that single checked box value which i checked is still on my array. instead of removing. pls advice – Probative

@Sarath Kumar its exist on jsbin.com/fewigaxesa/edit?js,console,output here too... when you clicked on header checked the result [25,23] comes. then uncheck header. and checked 1st checkbox. then again check header.reslut will be [25,23,25]. when you uncheck header again expected outcome should be all marked values should remove since unchecking the header. but when you check [25] still there.pls advice – Probative

jsbin.com/toqutacovi/edit?js,console,output check this I added this line var index=checkedArray.indexOf($(this).val()); if(index==-1) – Fug