Check box selection lost with pagination chnage

vaapavan

Hi, I have a data table with check boxes at the last column of the table. User can check multiple check boxes. When the second page is clicked, checked boxes in the first page are lost. Is there any option to retain same data after pagination. I'm doing ajax datatable, previous when I used to create html table and initialize as data table, this problem is not there. Please suggest. By the way below is my data table initialization code.

function InitializeCheckGrid(url, type, data, checkPosisition, CheckClass, checkValue)
{
     var table = $('#example').DataTable
          ({
              "ajax": {"url": url, 'type':type, 'data':data, 'dataType':'json'},
              "sPaginationType": "full_numbers",
              "lengthChange": false,
              "pageLength":25,
              "dom": "Bfrtip",
              "orderCellsTop": true,
              "fixedHeader": true,
              "columnDefs": [{
                   'targets': checkPosisition,
                   'orderable': false,
                   'searchable':false,
                   'render': function (data, type, full, meta){
                       return '<label class="' + CheckClass + '"><input type="checkbox">' + checkValue + '</label>';
                   }
                 }],
               "fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
                 var index = iDisplayIndex +1;
                 $('td:eq(0)',nRow).html(index);
                 return nRow;
               },
               "buttons": ['copy', 'excel', 'pdf', 'csv', 'print']
          });
          /*table.buttons().container()
                  .appendTo('#example_wrapper .col-sm-6:eq(0)');*/

    // Handle click on "Select all" control
     $('#example-select-all').on('click', function(){
        // Check/uncheck all checkboxes in the table
        var rows = table.rows({ 'search': 'applied' }).nodes();
        $('input[type="checkbox"]', rows).prop('checked', this.checked);
     });

     // Handle click on checkbox to set state of "Select all" control
     $('#example tbody').on('change', 'input[type="checkbox"]', function(){
        // If checkbox is not checked
        if(!this.checked){
           var el = $('#example-select-all').get(0);
           // If "Select all" control is checked and has 'indeterminate' property
           if(el && el.checked && ('indeterminate' in el)){
              // Set visual state of "Select all" control 
              // as 'indeterminate'
              el.indeterminate = true;
           }
        }
     });
}

colin

Hi @vaapavan ,

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

andresilva05

Hi @vaapavan,
I have same problem. Did you solve it?

colin

If you want us to take a look, feel free to post a test case, information on how to is in my last reply.

Colin