'columnVisibility' button color when selected?
'columnVisibility' button color when selected?
lisarush
Posts: 85Questions: 15Answers: 0
I am using jQuery-UI for styling and 'colvis' to create a list of items to toggle column visibility.
I am excluding some of the columns from the default list -- and then grouping them via 'columnVisibility' with their own name.
The standard columns in the list have class "ui-state-active" added when the column is visible (which changes their color).
However, this does not get applied for the grouped item (columnVisibility button) in the list.
How can I achieve this?
Below is an example. Click "Name" and it's color changes. Click "Grouped columns" and it's color does not change -- and I want it to.
I see the following javascript error in the console:
TypeError: settings.aoColumns[column] is undefined
error source line:
return settings.aoColumns[ column ].bVisible;
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/t/ju-1.11.4/jq-2.2.0,dt-1.10.11,b-1.1.2,b-colvis-1.1.2,b-html5-1.1.2,b-print-1.1.2/datatables.min.css"/>
<script type="text/javascript" src="https://cdn.datatables.net/t/ju-1.11.4/jq-2.2.0,dt-1.10.11,b-1.1.2,b-colvis-1.1.2,b-html5-1.1.2,b-print-1.1.2/datatables.min.js"></script>
</head>
<body>
<table class="display cell-border">
<thead>
<tr>
<th>Name</th>
<th>Job Title</th>
<th>Company</th>
<th class="noColvis">Email</th>
<th class="noColvis">Page</th>
<th class="noColvis">Call</th>
</tr>
</thead>
<tbody>
<tr>
<td>Fred Flintstone</td>
<td>Digger</td>
<td>ACME</td>
<td> yes </td>
<td> yes </td>
<td> no </td>
</tr>
<tr>
<td>Barney Rubble</td>
<td>Digger</td>
<td>ACME</td>
<td> yes </td>
<td> yes </td>
<td> no </td>
</tr>
<tr>
<td>Joe Manager</td>
<td>Supervisor</td>
<td>ACME</td>
<td> no </td>
<td> no </td>
<td> yes </td>
</tr>
</tbody>
</table>
<script type="text/javascript">
$(function() {
$('table.display').DataTable( {
dom: '<"H"<"dataTables_title">CBfr>t<"F"ip>',
buttons: [{extend: 'colvis',
columns: [1,2,3],
postfixButtons: [ {text: "Grouped Columns", extend:'columnVisibility', columns:[4,5,6]} ]
}]
} );
});
</script>
</body>
</html>
Answers
Ignore the javascript error (just indexing error on my part in the example) & update:
Original question still stands.
I have implemented a fix by extending the code and adding the last line shown here to the 'action' method for the 'columnVisibility' button:
Thanks for posting this. There is actually an error at the moment whereby the grouped visibility toggle only basis its visible state from a single column, and I think this is the same issue. I hope to get that fixed for the next release.
Regards,
Allan