Answers

• glenderson Posts: 231Questions: 11Answers: 29

  September 2015

  That is pretty neat feature. I always use <input> on each row and one on the header row to toggle them all. I might need to check this one out some more.

  For this method, I added the following to the column header containing the checkboxes. All it does is turn them all on, it's just an example.

  onclick='$(this).closest("table").find("tr").each(function() {$(this).addClass("selected")})'

  You could also do a toggleClass to turn them on / off depending upon their current states.
• glenderson Posts: 231Questions: 11Answers: 29

  September 2015

  This one might be a little more inline with using dataTables, however.

  onclick = 'var table = $(this).closest("table").DataTable(); table.rows().select();'

  or in javascript only

  var table = $(#your table).DataTable();
  table.rows().select();
• russlevy Posts: 15Questions: 6Answers: 0

  September 2015 edited September 2015

  Thanks. I hadn't seen the select method so that is a help.

  I am trying to figure out however if there is a way to add the same checkbox as in the example to the header.

  I also use checkboxes for all of my tables. 1. It is an easily understandable UI feature. 2. You can use the checkbox in the header to easily select and deselect all. 3. You can still use inline/bubble editing on the table. That's why I recommend this be a built in feature to datatables with a simple option checkbox: true
• allan Posts: 61,972Questions: 1Answers: 10,160 Site admin

  September 2015

  Hi,

  Currently there is no built in way of doing this. You would need to use a bit of extra code along the lines of what glenderson suggests. However, that is a nice suggestion for a future enhancement - thanks.

  Allan
• russlevy Posts: 15Questions: 6Answers: 0

  September 2015

  Glenderson is helping with selecting all checkboxes. However how can I add a pseudo checkbox to the th? I tried adding the class select-checkbox but that does not work.
• severs Posts: 1Questions: 0Answers: 0

  October 2015

  In datatables.css beginning with line:

  table.dataTable td.select-checkbox"
  

  Remove all "td"

  Stop before:

  div.dataTables_wrapper span.select-info,
  

  Add the following lines (thead has dark background -> white border-color):

  table.dataTable th.select-checkbox:before { border-color: white; }
  table.dataTable tr.selected th.select-checkbox:after { text-shadow: none; font-weight: normal;}
  

  Add Javascript-Funktion:

  function toggleSelectedRows(el){
      if($(el).parent().toggleClass("selected").hasClass("selected")){
          table.rows().select();
      }else{
          table.rows().deselect();
      }
  }
  

  HTML in thead->tr :

  <th onclick="toggleSelectedRows(this)"></th>