ScrollX prevents multiple tables from rendering
ScrollX prevents multiple tables from rendering
lennyhadley
Posts: 30Questions: 8Answers: 0
ScrollX seems to be breaking my 2nd table (tables defined by class). I've had this problem here and there using datatables, but I'm sure it's something I'm missing. In the link below, the 2017 table renders fine, the 2018 does not. note the 2018 is just a blank holder table for now, but if I take ScrollX of the options list, everything renders fine.
http://www.topflightfantasysports.com/nba/nba-team-stats/
<script>
$(document).ready(function() {
var table = $('table.TeamStats').DataTable({
"columnDefs": [
{ "targets": [15,16,17,18,19,20,21,22,23,24],
"visible": false }
],
"pageLength": 32,
paging: false,
searching: false,
"order": [ 1, 'desc' ],
"info": false,
scrollCollapse: true,
dom: 'Bfrtip',
buttons: [
{
extend: 'colvisGroup', text: 'Offense',
show: [1,2,3,4,5,6,7,8,9,10,11,12,13,14], hide: [15,16,17,18,19,20,21,22,23,24]
},
{
extend: 'colvisGroup', text: 'Defense',
show: [15,16,17,18,19,20,21,22,23,24], hide: [1,2,3,4,5,6,7,8,9,10,11,12,13,14]
}
],
scrollX: true
});
});
</script>
This discussion has been closed.
Answers
There is a Javascript error happening on your page:
There is no
myBtnelement, so it throws an error. That is happening during the DataTable initialisation, so its breaking the "thread" and the second table doesn't get initialised.Since you have jQuery already you could use:
and likewise for
none. Or just add anifcondition to check ifgetElementByIdfound anything or returned null. Defensive programmingAllan
Wow, that was it. Whoops. Thanks!