djmartini djmartini - 6 months ago 98
Javascript Question

DataTables plug-in - Display scrollbar below tfoot tag?

I use jQuery DataTables plug-in and

"scrollX":true
for horizontal scrolling.

Why scroll bar appears above
tfoot
tag? How to make it appear below footer?

var table = $('#example')
.DataTable(
{
"scrollX": true,
"scrollCollapse": true,
"dom": 'Zlrtip',
"colResize": {
"tableWidthFixed": false,
//"handleWidth": 10,
"resizeCallback": function(column)
{

}
},
"searching": false,
"paging": false,
"info": false,
"deferRender": true,
"sScrollX": "190%"
});


See JSFiddle example demonstrating the problem.

Answer

You need to add the following code to you DataTables initialization options:

"fnInitComplete": function(){
    // Disable TBODY scoll bars
    $('.dataTables_scrollBody').css({
        'overflow': 'hidden',
        'border': '0'
    });

    // Enable TFOOT scoll bars
    $('.dataTables_scrollFoot').css('overflow', 'auto');

    // Sync TFOOT scrolling with TBODY
    $('.dataTables_scrollFoot').on('scroll', function () {
        $('.dataTables_scrollBody').scrollLeft($(this).scrollLeft());
    });                    
},

See updated JSFiddle for demonstration.