Add checkbox in title

Add checkbox in title

russlevyrusslevy Posts: 15Questions: 6Answers: 0

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!

Answers

  • glendersonglenderson Posts: 231Questions: 11Answers: 29

    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.

  • glendersonglenderson Posts: 231Questions: 11Answers: 29

    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();

  • russlevyrusslevy Posts: 15Questions: 6Answers: 0
    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

  • allanallan Posts: 61,972Questions: 1Answers: 10,160 Site admin

    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

  • russlevyrusslevy Posts: 15Questions: 6Answers: 0

    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.

  • severssevers Posts: 1Questions: 0Answers: 0

    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>
    
This discussion has been closed.