DataTables plug-in - Display scrollbar below tfoot tag?

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.

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;
}