Amadeus Sánchez Amadeus Sánchez - 1 month ago 16
Javascript Question

Checkbox for each button to select a column in Datatables 1.10 without ColVis

As ColVis is deprecated in Datatables 1.10, I am looking for a way to add a checkbox to each button to select a column in the table in the same way it is done in this example that uses ColVis.

In the following JSFiddle is what I have done so far. Below is the code that I am using.

$(document).ready(function() {
var table = $('#example').DataTable( {
dom: 'B',
"buttons": [
{
extend: 'colvis',
postfixButtons: [
{
extend: 'colvisRestore',
text: 'Restore'
}
],
buttons : [{
extend: 'columnsToggle',
}],
}
],
}
); } );


I would really appreciate your share of expertise on this one.

Answer

SOLUTION

Checkboxes has been replaced by inset/outset styles. However you can simulate a checkbox using CSS, see the rules below:

.dt-button-collection a.buttons-columnVisibility:before,
.dt-button-collection a.buttons-columnVisibility.active span:before {
    display:block;
    position:absolute;
    top:1.2em;
    left:0;
    width:12px;
    height:12px;
    box-sizing:border-box;
}

.dt-button-collection a.buttons-columnVisibility:before {
    content:' ';
    margin-top:-6px;
    margin-left:10px;
    border:1px solid black;
    border-radius:3px;
}

.dt-button-collection a.buttons-columnVisibility.active span:before {
    content:'\2714';
    margin-top:-11px;
    margin-left:12px;
    text-align:center;
    text-shadow:1px 1px #DDD, -1px -1px #DDD, 1px -1px #DDD, -1px 1px #DDD;
}

.dt-button-collection a.buttons-columnVisibility span {
    margin-left:20px;    
}

DEMO

See this jsFiddle for code and demonstration.

NOTES

See my other answer to your question explaining why action will not work for columnsToggle button.