Show/Hide Tables Example Broken?
Show/Hide Tables Example Broken?
hdoran
Posts: 16Questions: 8Answers: 0
I'm trying to reproduce the example found here https://datatables.net/examples/api/show_hide.html. The code below is taken verbatim from the example, but it does not produce the column names in order to toggle as the example shows. Is the example missing something or is my code somehow not organized correctly in order to reproduce?
<!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">
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
</head>
<title>My Application</title>
<body>
<script>
$(document).ready(function() {
var table = $('#example').DataTable( {
"scrollY": "200px",
"paging": false
} );
$('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>
<!-- Get HTML Table and paste into example here from example site in order to reproduce -->
</body>
</html>
This question has an accepted answers - jump to answer
This discussion has been closed.
Answers
If you view the source of the example page you will find this
divthat displays the toggle columns on the page:You will need to build something similar.
Kevin
@kthorngren, thank you. I popped that div into my HTML. Get the values but not as clickable elements. Is anyone able to reproduce the example on the page?
I copied the code here and it works:
http://live.datatables.net/coliwusi/1/edit
I can click the column names to show and hide the columns.
Kevin