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示例.

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

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