Style colvis buttons after hiding
Style colvis buttons after hiding
hdoran
Posts: 16Questions: 8Answers: 0
I have the following working code below that uses a button to hide/show columns after clicking (needs an HTML table copied in to reproduce). It works as expected. However, in the UI, is it possible for the buttons corresponding to their columns that have been hidden to grey out or change colors such that a user would know which buttons have been hidden and which are still active?
As it stands now the buttons all have the same look even when a certain column has been hidden.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css" rel="stylesheet">
<link href="https://cdn.datatables.net/colreorder/1.5.2/css/colReorder.dataTables.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/colreorder/1.5.2/js/dataTables.colReorder.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.2/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.2/js/buttons.colVis.min.js"></script>
</head>
<title>My Application</title>
<body>
<script>
$(document).ready(function() {
$('#example thead tr').clone(true).appendTo( '#example thead' );
$('#example thead tr:eq(1) th').each( function () {
var title = $('#example thead th').eq( $(this).index() ).text();
$(this).html( '<input type="text" placeholder="Search '+title+'" />' );
} );
// DataTable
var table = $('#example').DataTable( {
orderCellsTop: true,
fixedHeader: true,
colReorder: true,
dom: 'Bfrltip',
buttons: [
//'colvis',
{
extend: 'colvis',
text: 'Show/Hide Columns',
}
]
} );
// Apply the filter
$("#example thead input").on( 'keyup change', function () {
table
.column( $(this).parent().index()+':visible' )
.search( this.value )
.draw();
} );
$('a.toggle-vis').on( 'click', function (e) {
e.preventDefault();
// Get the column API object
var column = table.column( $(this).attr('data-column') );
// Toggle the visibility
column.visible( ! column.visible() );
} );
} );
</script>
<!--insert HTML table -->
</body>
</html>
This question has an accepted answers - jump to answer
This discussion has been closed.
Answers
I've put your code into an example. The effect you want can be achieved with just a couple of lines of CSS. http://live.datatables.net/kibokupu/3/edit
@silkspin Excellent, tested and confirming it works. Thanks.