ScrollX prevents multiple tables from rendering

lennyhadley

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>

allan

There is a Javascript error happening on your page:

function scrollFunction() {
    if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
        document.getElementById("myBtn").style.display = "block";
    } else {
        document.getElementById("myBtn").style.display = "none";
    }
}

There is no myBtn element, 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:

$('#myBtn').css('display', 'block');

and likewise for none. Or just add an if condition to check if getElementById found anything or returned null. Defensive programming

Allan

lennyhadley

Wow, that was it. Whoops. Thanks!