javascript - JQuery 数据表标题下方的附加滚动条

Question

我正在使用数据表（Jquery）。

使用代码，我在表格的页脚上方获得了一个水平滚动条，如链接中所示：

 "sScrollX": "100%",
 "sScrollXInner": "120%",
 "bScrollCollapse": true,

现在我还想在标题下方获得另一个滚动条。帮帮我。

Answer 1

将以下代码添加到 Datatable 初始化中：

"fnInitComplete": function(){

    // Enable THEAD scroll bars
    $('.dataTables_scrollHead').css('overflow', 'auto');

    // Sync THEAD scrolling with TBODY
    $('.dataTables_scrollHead').on('scroll', function () {
        $('.dataTables_scrollBody').scrollLeft($(this).scrollLeft());
    });                    
},

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

jsFiddle：http: //jsfiddle.net/3xvpznd3/

Answer 2

为此，您必须添加另一个container具有fixed width like 1000pxwith overflow auto。如果内容overflows到1000px那时你将能够显示scroller在container

像：

CSS

.newcontainer{width:1000px;overflow:auto;}

HTML

<div class="newcontainer">
    <!-- Your div having the datatable-->
</div>

Answer 3

Joseph 对上述代码稍作更新：

当您添加 Thead 滚动条并在滚动事件中更改其位置时，它会在一分钟内被调用数千次，这将使您的浏览器响应缓慢，从而导致 X 水平条滚动缓慢。为了避免这种情况，添加如下所示的节流阀，基本上可以确保函数在 100 毫秒内执行一次。

"fnInitComplete": function(){

                        // Enable THEAD scroll bars
                        $('.dataTables_scrollHead').css('overflow', 'auto');

                        // Sync THEAD scrolling with TBODY
                        $('.dataTables_scrollHead').on('scroll', $.throttle( 100,function () {
                            $('.dataTables_scrollBody').scrollLeft($(this).scrollLeft());
                        }));                    
                    }