Error Saving Selected Checkbox on Datatables Server Side

Error Saving Selected Checkbox on Datatables Server Side

D.RogerD.Roger Posts: 3Questions: 1Answers: 0

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 !

Answers

  • colincolin Posts: 14,452Questions: 1Answers: 2,462

    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

  • kthorngrenkthorngren Posts: 16,799Questions: 25Answers: 3,982

    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.RogerD.Roger Posts: 3Questions: 1Answers: 0

    @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.RogerD.Roger Posts: 3Questions: 1Answers: 0

    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.

  • kthorngrenkthorngren Posts: 16,799Questions: 25Answers: 3,982
    edited November 2020

    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

  • Paresh10Paresh10 Posts: 1Questions: 0Answers: 0

    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"
    } );
    
  • DurgzozoDurgzozo Posts: 1Questions: 0Answers: 0

    $(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');
        }
    });
    

    });

  • allanallan Posts: 56,837Questions: 1Answers: 9,035 Site admin

    @Durgzozo - Do you have a question?

Sign In or Register to comment.