Javascript DataTables插件-是否在tfoot标记下方显示滚动条？

我使用jquerydatatables插件和

“scrollX”：true

进行水平滚动

为什么滚动条出现在标签上方？如何使其显示在页脚下方

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

---

请参见演示问题

您需要向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());
    });                    
},

---

参见演示。

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

}

---

我更喜欢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 scroll listener触发了tfoot scroll listener，后者触发了tbody，等等。（请参阅）当我禁用DT listener并将其替换为我自己的时，问题得到了解决

$(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);

---

一个好决定！但是它不适用于FixedColumn@djmartini，我认为在您的示例中，FixedColumn和FixedHeader扩展存在一些问题。当我注释代码时，表仍然显示在固定的列和页脚下面。可能是因为您使用的是最新的扩展和较旧的数据表，我不知道。另外，我建议的代码更像是一种黑客行为，不会在所有用例中都起作用。。但这种方法有什么突破呢？？你似乎不太自信。@djmartini，我也面临同样的问题。您是否有任何解决方案可用于在tfoot标记下方显示带有FixedColumn的滚动条？

$(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);