Question

我正在使用Datatables（Jquery）。

使用代码我在表格的上方得到一个横向滚动条，如Link中所示：

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

现在我想在Header下方获得另一个滚动条。帮助我。

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 plug-in - Display scrollbar below tfoot tag?

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

Answer 2

为此，您必须添加另一个container，fixed width like 1000px与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());
                        }));                    
                    }

JQuery Datatable标题下方的其他滚动条

3 个答案: