djmartini djmartini - 1 year ago 162
Javascript Question

DataTables plug-in - Display scrollbar below tfoot tag?

I use jQuery DataTables plug-in and

for horizontal scrolling.

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

var table = $('#example')
"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.


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

"fnInitComplete": function(){
    // Disable TBODY scoll bars
        'overflow': 'hidden',
        'border': '0'

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

    // Sync TFOOT scrolling with TBODY
    $('.dataTables_scrollFoot').on('scroll', function () {

See updated JSFiddle for demonstration.