DataTables plug-in - Display scrollbar below tfoot tag?

Question

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 1

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.

Answer 2

The solution given by Gyrocode.com is good. But it fails when tested across various devices and browsers. So here is an enhanced version which works on touch devices as well as OS specific browsers.

fnInitComplete: function() {
    var device = getBrowserInfo(),
        horizontalScroll = 0,
        tableElement = $(this[0]),
        scrollBody = $('.dataTables_scrollBody'),
        scrollFoot = $('.dataTables_scrollFoot'),
        maxScrollLeft,
        start = { x:0 , y:0 },
        offset;

    // Compute the maxScrollLeft value
    tableElement.on('draw.dt', function() {
        maxScrollLeft = tableElement.width() - scrollBody.width() + 2;
    });

    // Disable TBODY scoll bars
    scrollBody.css({ 'overflow-x': 'hidden' });

    // Enable TFOOT scoll bars
    scrollFoot.css('overflow-x', 'auto');

    // Sync TFOOT scrolling with TBODY
    scrollFoot.on('scroll', function(event) {
        horizontalScroll = scrollFoot.scrollLeft();
        scrollBody.scrollLeft(horizontalScroll);
    });

    // Enable body scroll for touch devices
    if((device.isAndroid && !device.isChrome) || device.isiPad 
        || (device.isMac && !device.isFF)) {
        // Enable for TBODY scoll bars
        scrollBody.css({ 'overflow-x': 'auto'});
    }

    // Fix for android chrome column misalignment on scrolling
    if(device.isAndroid && device.isChrome) {
        scrollBody[0].addEventListener("touchstart", touchStart, false);
        scrollBody[0].addEventListener("touchmove", touchMove, false);
        scrollFoot[0].addEventListener("touchstart", touchStart, false);
        scrollFoot[0].addEventListener("touchmove", touchMoveFooter, false);                    
    }

    // Fix for Mac OS dual scrollbar problem
    if(device.isMac && device.isFF) {
        scrollBody.on('wheel', function(event) {
            if(Math.abs(event.originalEvent.deltaY) < 3) {
                event.preventDefault();
            }
            performScroll(event.originalEvent.deltaX);
        });
    }

    /*
     * Performs the scroll based on the delta value supplied.
     * @param deltaX {Number}
     */
    function performScroll(deltaX) {
        horizontalScroll = horizontalScroll + deltaX;
        if(horizontalScroll > maxScrollLeft) {
            horizontalScroll = maxScrollLeft;
        } else if(horizontalScroll < 0) {
            horizontalScroll = 0;
        }
        scrollFoot.scrollLeft(horizontalScroll);
    }

    /*
     * Computes the touch start position along with the maximum
     * scroll left position
     * @param e {object}
     */
    function touchStart(e) {
        start.x = e.touches[0].pageX;
        start.y = e.touches[0].pageY;
    }

    /*
     * Computes the offset position and perform the scroll based
     * on the offset
     * @param e {Object}
     */
    function touchMove(e) {
        offset = {};
        offset.x = start.x - e.touches[0].pageX;
        offset.y = start.y - e.touches[0].pageY;
        performScroll(offset.x / 3);
    }

    /*
     * Computes the offset position and perform the scroll based
     * on the offset
     * @param e {Object}
     */
    function touchMoveFooter(e) {
        e.preventDefault();
        touchMove(e);
    }

    /**
     * @getBrowserInfo
     * @description
     * To get browser information
     *
     * @return {Object}
     */
    function getBrowserInfo() {
        return {
            isiPad: (/\(iPad.*os (\d+)[._](\d+)/i).test(navigator.userAgent) === true || navigator.platform.toLowerCase() === 'ipad',
            isAndroid: (/\(*Android (\d+)[._](\d+)/i).test(navigator.userAgent),
            isMac: navigator.platform.toUpperCase().indexOf('MAC') >= 0,
            isChrome: !!window.chrome,
            isFF: !!window.sidebar
        };
    };

}

Also to remove the slim scroll in Mac OS and various other mobile devices add

.dataTables_scrollBody::-webkit-scrollbar {
    display: none;
}