ScrollY render issue

iancbaldwin

Hi All,

I have a datatable displaying on a page in our application and have added a scrollY to it. One problem we are seeing though is that all the data flashes up on the screen for a second or 2 before the scroll is applied. This is probably best illustrated by screen shots:

Here is the code i am using to initialise the datatable:

          $('#search-results').dataTable({          
        'columnDefs': [{
            'targets': 0,
            'searchable': false,
            'orderable': false,
            'width': '1%',
            'className': 'dt-body-center',
            'render': function (data, type, full, meta){
                return '<input type="checkbox">';
            }},
            { orderable: false, targets: [-1, -2, -3, -4] }         
        ],
        'order': [[1, 'asc']],
        "bLengthChange": false,
        "bDestroy": true,
        "bFilter": true,
        "paging": false,
        "scrollY":        "210px",
        "scrollCollapse": true, 
        "autoWidth": false
    }); 

Does anyone have an insight on this please?

Many thanks

allan

This is a Flash Of Unscripted Content (FOUC). Basically, the HTML page is taking a while to load, so the browser is attempting to render it before the Javascript is executed.

The best thing to do is speed up the response from the server (for example buffering the output to send it all as once, using gzip, etc). The other option is to hide the table until its initialisation is complete.

Allan