This demo of ColVis shows a number of different features of the plug-in. Firstly, it shows alternative styling of the plug-in with the button nested just above the scrollbar in the DataTable. Secondly there is a "Restore" button in the ColVis drop down, which will restore the original visibility settings when the table was initialised (this is controlled by using the "bRestore" option). Finally it shows that the drop down can be set to align on the right of the button, rather than the left.
Note that this demo requires DataTables 1.7.5 or later.
$(document).ready( function () {
$('#example').dataTable( {
"sDom": '<"H"fr>tC<"F"ip>',
"bJQueryUI": true,
"bPaginate": false,
"sScrollY": "200px",
"bScrollCollapse": true,
"bScrollAutoCss": false,
"aoColumnDefs": [
{ "bVisible": false, "aTargets": [ 2 ] }
],
"oColVis": {
"buttonText": " ",
"bRestore": true,
"sAlign": "left"
},
"fnDrawCallback": function (o) {
/* Position the ColVis button as needed */
var nColVis = $('div.ColVis', o.nTableWrapper)[0];
nColVis.style.width = o.oScroll.iBarWidth+"px";
nColVis.style.top = ($('div.dataTables_scroll', o.nTableWrapper).position().top)+"px";
nColVis.style.height = ($('div.dataTables_scrollHead table', o.nTableWrapper).height())+"px";
}
} );
} );