DataTables插件 - 显示滚动条下面的tfoot标签？

问题描述

我使用jQuery DataTables插件和scrollX：true 进行横向滚动。

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

为什么滚动bar出现在 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%"
    });

请参阅演示了这个问题。

See JSFiddle example demonstrating the problem.

推荐答案

您需要将以下代码添加到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());
    });                    
},

请参阅进行演示。

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