I have a very wide html table. I want to selectively hide groups of columns at a time using a list of <a>.
Someone suggested using Datatables.net. So I have developed a proof of concept and all looks well.
http://jsfiddle.net/ChrisGuest/orgj7oL9/
Now when I drop this code into a web2py as below, I end up with wrong behaviour and seeing this error in the JS Console:
Uncaught TypeError: Cannot read property 'style' of undefined
I suspected that this could be caused by a conflict between DataTables.js and another JavaScript module so I went through & commented them all out except for jquery.js .
Unfortunately the problems still persists.
I have documented how I use DataTables.js with web2py. I am wondering if I've missed something important here. I'd be curious if anyone else could get this to go.
Thanks,
Chris
I have modified layout.html to include:
{{extend 'layout.html'}}
<h1>Results</h1>
<ul>...</ul>
<table id="batch_table">
...
</table>
<script>
$(document).ready(function() {
var table = $('#batch_table').DataTable( {
"scrollY": "200px",
"paging": false
} );
$('a.toggle-vis').on('click', function (e) {
e.preventDefault();
console.log('a.toggle-vis click event');
// Get the column API object
var data_columns = $(this).attr('data-column');
if (data_columns.length) {
var data_columns = data_columns.split(',');
for (var i=0; i<data_columns.length; i++) {
var column = table.column(data_columns[i]);
if (column) {
if (column.style===undefined)
column.style = '';
column.visible( ! column.visible() );
console.log(
i + ': ' + column.style + ': ' + column.visible()
);
}
}
}
});
});
</script>