DataTables 插件 - 在 tfoot 标签下方显示滚动条？

Question

我使用 jQuery DataTables 插件和"scrollX":true 进行水平滚动。

为什么tfoot标签上方会出现滚动条？如何让它出现在页脚下方？

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%"
    });

请参阅 JSFiddle example 演示问题。

Answer 1

您需要在 DataTables 初始化选项中添加以下代码：

"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());
    });                    
},

请参阅updated JSFiddle 进行演示。

Answer 2

Gyrocode.com给出的解决方案不错。但是在各种设备和浏览器上进行测试时它会失败。因此，这是一个增强版本，适用于触摸设备以及特定于操作系统的浏览器。

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

}

还可以移除 Mac OS 和其他各种移动设备中的超薄滚动条

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

Answer 3

我更喜欢 Japheth Adhavan 的回答，但它在 Windows 上不起作用，所以我修改了禁用 tbody 滚动条的代码。

// Disable TBODY scroll bars
if (!device.isMac && !device.isAndroid) {
    // for Windows
    scrollBody.css({'-ms-overflow-style': 'none'})
} else {
    scrollBody.css({ 'overflow-x': 'hidden' });
}

在 Windows 上使用键盘箭头滚动仍然非常慢，大概是因为 DataTables 中的 tbody 滚动侦听器触发了触发 tbody 的 tfoot 滚动侦听器等（请参阅How to Synchronize Scroll Between two windows）当我禁用 DT 侦听器并替换时用我自己的，问题解决了。

$(scrollBody).off('scroll.DT');

var ignore = false;

// Sync TFOOT scrolling with TBODY
function syncScroll(elA, elB) {

    function scrollLeft(el, position) {
        ignore = true;
        el.scrollLeft(position);
    }

    $(elA).scroll(function() {
        var tmpIgnore = ignore;
        ignore = false;
        if (!tmpIgnore) {
            var scrollPos = $(elA).scrollLeft();
            $(scrollHead).scrollLeft(scrollPos);
            scrollLeft($(elB), scrollPos);
        }
    });
}

syncScroll(scrollBody, scrollFoot);
syncScroll(scrollFoot, scrollBody);