Error Saving Selected Checkbox on Datatables Server Side

D.Roger

Hi. im searching for the possible solution for thisproblem. my selected checkbax revert its value to uncheck whenever i tried to search or click the pagination. i tried using stateSave and drawcallBack but the problem is still the same..

Here's my Code..

 sample_tbl= $('#sample_tbl').DataTable({
      "scrollX": true,
      "destroy": true,
      'searching': true,
      'paging': true,
      'info': true,
      'stateSave': true,  
      'processing' : true,
      'serverSide' : true,
      'autoWidth'   : false,
      'ajax' : {
        'url' : '<?= BASE_URL ?>/branches/setupQuickMap',
        'type' : 'post',
        'data' : {
          start_date : sd,
          end_date : ed,
          filter : filter,
          search_term : search_term
        }
      },
      "columns" : [

        {"data" : ""},
        {"data" : "image"},
        {"data" : "user"},
        {"data" : "branch_name"},
        {"data" : "channel"},
        {"data" : "customer_code"},
        {"data" : "potential_account"},
        {"data" : "van_sales", 'sortable': false, 'searchable': false },
        {"data" : "booking_sales", 'sortable': false, 'searchable': false},
        {"data" : "unique_visit", 'sortable': false, 'searchable': false},
        {'data' : 'action', 'sortable': false, 'searchable': false}
      ],
      "order":[[1,'asc']],

      "columnDefs": [ {
              "orderable": false,
              "className": 'select-checkbox',
              "targets":   0,
              'checkboxes': {
                 'selectRow': true
              }   
          } ],
      "select": {
          "style":    'os',
          "selector": 'td:first-child',
          'style': 'multi'
      }

  });

any answers will be appreciated. good day guys !

colin

Yep, with serverSide, the client only knows about the data displayed on the page, so anything happening before that draw will be lost. You could try using draw to get the checkboxes back in their previous condition, having saved the state in a global variable whenever select or deselect triggers,

Colin

kthorngren

Not sure if you are using the Gyrocode Checkboxes library or not. You do have the configuration for it:

             'checkboxes': {
                'selectRow': true
             } 

That library will keep track of the selected rows when using server side processing. See this example. The key is the checkbox column needs to have a unique ID.

Since its not keeping the selected rows I suspect you aren't loading the library code.

Kevin

D.Roger

@kthorngren well. im using his library but i dont know why whenever i select one of the check boxes. it selecting all checkboxes when im clicking the pagination.

D.Roger

sir @colin well. i'm new to this and just have half a year of experience so i'm afraid i dont know how to use the drawcallback without an example.anyway thankyou i will analayze that function.

kthorngren

im using his library but i dont know why whenever i select one of the check boxes. it selecting all checkboxes when im clicking the pagination.

Their docs state this in the known limitations:

Column containing checkboxes must have unique data. Using columns.data option set to null for the column containing checkboxes will result in unexpected behavior.

You have {"data" : ""}, which is likely has the same limitation. As I mentioned previously you will need this column to have a unique key. I believe this is how it keeps track of the selected rows when using server side processing.

For specific support of this library you will need to contact the developer. Use the Report a Bug button on the example page.

Kevin

Paresh10

I had the same problem. I am using serverside and needed the rows to be selected when paginating. Solved the issue by using 'draw' API. Thanks, Collin. Here is the example from the docs

datatable.on( 'draw', function () {
   "Your logic should go here"
} );

Durgzozo

$(function () {
product_list = $('#product_list').DataTable({
processing: true,
serverSide: true,
iDisplayLength: 15,
lengthChange: false,
info: false,
ajax: base_path+"products",
language: {
processing: '

'
},
columns: [
{
orderable: false,
className: 'select-checkbox',
targets: 0,
data:'id'
},
{data: 'product_name' ,class: 'text-left th-name'},
{data:'category_name', class: 'text-left'},
{data: 'product_type', class: 'text-left'},
{data: 'created_at'},
{data: 'action',class: 'action-field', orderable: false, searchable: false},
],
select: {
style: 'multi',
selector: 'td:first-child',
},
order: [
[1, 'asc'],
],
});
// search in datatable
$('#supplierList_search').keyup(function() {
// alert($(this).val());
product_list.search($(this).val()).draw();
});

   $('body').on('click', '.show_confirm', function () {
      var form =  $(this).closest("form");
      var name = $(this).data("name");
      event.preventDefault();
      swal({
          title: `Are you sure you want to delete this record?`,
          text: "If you delete this, it will be gone forever.",
          icon: "warning",
          buttons: true,
          dangerMode: true,
      })
      .then((willDelete) => {
        if (willDelete) {
          form.submit();
      }
  });
});


    $('#CheckAllButton').click(function() {
    if (product_list.rows({
            selected: true
        }).count() > 0) {
        product_list.rows().deselect();
        return;
    }
    product_list.rows().select();
});



product_list.on('select deselect', function(e, dt, type, indexes) {
    if (type === 'row') {
        if (dt.rows().count() === dt.rows({
                selected: true
            }).count()) {
            $('#CheckAllButton i').attr('class', 'fa fa-check');
            return;
        }
        if (dt.rows({
                selected: true
            }).count() === 0) {
            $('#CheckAllButton i').attr('class', '');
            return;
        }
        $('#CheckAllButton i').attr('class', 'fa fa-minus');
    }
});

});

allan

@Durgzozo - Do you have a question?