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.
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;
}
See this jsFiddle for code and demonstration.
See my other answer to your question explaining why action
will not work for columnsToggle
button.
I built upon @gyrocode-com's answer to make it look less "button-y" and more like a simple list of checkboxes, as well as to support newer versions of DataTables and Buttons because they now generate the colvis buttons using <button>
HTML tag and not <a>
.
buttons: ['colvis']
.dt-button-collection .dt-button.buttons-columnVisibility {
background: none !important;
background-color: transparent !important;
box-shadow: none !important;
border: none !important;
padding: 0.25em 1em !important;
margin: 0 !important;
text-align: left !important;
}
.dt-button-collection .buttons-columnVisibility:before,
.dt-button-collection .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 .buttons-columnVisibility:before {
content:' ';
margin-top:-8px;
margin-left:10px;
border:1px solid black;
border-radius:3px;
}
.dt-button-collection .buttons-columnVisibility.active span:before {
font-family: 'Arial' !important;
content:'\2714';
margin-top: -15px;
margin-left: 12px;
text-align: center;
text-shadow: 1px 1px #fff, -1px -1px #fff, 1px -1px #fff, -1px 1px #fff;
}
.dt-button-collection .buttons-columnVisibility span {
margin-left:17px;
}
This also works well with the multi-column colvis templates like the two-column
and fixed two-column
for example.
buttons: [{
extend: 'colvis',
collectionLayout: 'two-column'
}]
JSFiddle for a live demo.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With