scrollCollapse Lag Workaround

theflarenet

I'd like to begin by thanking the creators and contributors to this incredible product. I've found an issue pertaining to 'scrollCollapse' when the 'scrollY' is set to a dynamic size (#vh) instead of pixels. The scrollable frame within the page stutters as you lag through--regardless ifthe table rows are prepopulated or are fed through an AJAX call (even with a total of 10-20 rows).

I've been trying to workaround it and found one solution which is by using a fixed scrollY size in pixels. In addition, adding pagination with the default pageLength of -1 (All) somehow gets rid of the lag; however, if I try to tweak the page up by hiding the pagination Prev/Next buttons, the lag is presented again. It's very odd and I'm not sure what's going on since I'm using the latest version and tried it on different webpages.

    <script>
    $(document).ready( function () {
        var table =
            $('#table').DataTable({
                "filter": true,
                "deferRender": true,
                "paging": true,
                "lengthChange": false,
                "pageLength": -1,
                // "lengthMenu": [ [50, 100, 500, -1], [50, 100, 500, "All"] ],
                scrollY: '20vh',
                scrollCollapse: true,
            });
    });
    </script>

    <style>
        .dataTables_paginate {
            display: none !important;
        }
    </style>

colin

Hi @theflarenet ,

Thanks for the kind words! I copied your code into this fiddle http://live.datatables.net/nuyalede/1/edit , and I'm not seeing the problem. If you are, could you give me steps on how to reproduce, please, or, if you're not, could you modify the example to demonstrate the issue.

Note also, you don't need to change the class of the dataTables_paginate class, you can just modify dom as in that example.

Cheers,

Colin