Replies

• kthorngren Posts: 21,341Questions: 26Answers: 4,954

  April 2019 edited April 2019

  Looks like you want to toggle the row selection instead of selecting all or deselecting all. Is this correct? If so I would take a different approach, see this example:
  http://live.datatables.net/qaqoguva/1/edit

  Using the selector-modifier of {selected:true} the click event first gets the selected rows and deselected rows. Actually it gets the row nodes using rows().nodes(). Then it uses the row-selector of node to define the rows to for rows().select() and rows().deselect().

  Kevin
• AlexanderLamas Posts: 58Questions: 1Answers: 0

  May 2019

  Hi @kthorngren ,

  Thanks for your response.
  I'm sorry for the late reply.

  I saw the sample you posted, but actually, I want to keep the select and deselect all been triggered via checkbox in the header of the table.

  My point is to instead of having to code a function, like this

  $('#myTable').on('click', '.toggle-all', function (e) {
      $(this).closest("tr").toggleClass("selected");
      if ($(this).closest("tr").hasClass("selected"))
          table.rows().select();
      else
          table.rows().deselect();
  });   
  

  I could use an event, like this

  }).on('select.dt deselect.dt', function (e) {
      let numberOfRecords = table.rows().nodes().length;
      let selectedRows = table.rows(".selected").nodes().length;
   
      if (numberOfRecords === selectedRows)
          $(".toggle-all").closest("tr").addClass("selected");
      else
          $(".toggle-all").closest("tr").removeClass("selected");
   
      table.button(0).enable(selectedRows > 0);
      table.button(1).enable(selectedRows === 1);
      table.button(2).enable(selectedRows === 1);
  });
  

  But specific to be trigger when I click on the header checkbox.

  The event sample above "select.dt deselect.dt" only works when you click in the checkbox for the table body.

  Is it possible to have an event to be trigger when click on the header checkbox?

  Thanks again!

  Regards,
  Alex
• kthorngren Posts: 21,341Questions: 26Answers: 4,954

  May 2019

  Here is a Datatables checkbox/select plugin that includes a checkbox in the header for select/deselect all.
  https://www.gyrocode.com/projects/jquery-datatables-checkboxes/

  Or you can checkout this example:
  http://live.datatables.net/yuzabema/1/edit

  Is this what you are looking for?

  Kevin
• AlexanderLamas Posts: 58Questions: 1Answers: 0

  June 2019

  Hi @kthorngren ,

  Thank you very much for your reply.
  Ideally, the first example you sent me is what I'm looking for.
  I just didn't want to make another reference to help me on that.
  It would be nice to do something like it just using purely dataTable API.

  The second example is what I currently have, and it works well.

  So, please let me know if there is a way to put the code in this method

  $('#myTable').on('click', '.toggle-all', function (e) {
  ...
  });  
  

  inside of dataTable API event.

  Thank you very much!
  Much appreciated your help.

  Regards,
  Alex