DataTables 插件 - 在 tfoot 标签下方显示滚动条? [英] DataTables plug-in - Display scrollbar below tfoot tag?

问题描述

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

I use jQuery DataTables plug-in and "scrollX":true for horizontal scrolling.

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

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

请参阅 JSFiddle 示例 演示问题.

推荐答案

需要在DataTables初始化选项中添加如下代码:

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

请参阅更新的 JSFiddle 以进行演示.

这篇关于DataTables 插件 - 在 tfoot 标签下方显示滚动条?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！