Add checkbox in title

russlevy

Hi

I like this new example https://datatables.net/extensions/select/examples/initialisation/checkbox.html

Is there a way to add a checkbox to the title which would perform select all and deselect all?

Also I recommend adding this example as a simple option like checkbox: true

Thanks!

glenderson

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

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

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

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

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

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>