javascript - 顶部水平滚动条数据表javascript

Question

datatable我的网页中有一个。我需要horizontal scroll bar在桌子上显示一个。我试过了table.wrap('<div style="width:980px; overflow-x:auto;"/>');。它在表格底部显示水平滚动条。如何在数据表顶部显示滚动条。有什么帮助吗？

Answer 1

您可以在http://progrnotes.blogspot.com.ee/2013/07/horizo ​​ntal-scrollbars-at-top-bottom-in-datatables.html找到答案：您可以使用 jQuery-doubleScroll 插件（https： //github.com/sniku/jQuery-doubleScroll )。但是，这也不适用于由 ajax 加载的数据表。你需要稍微调整一下。

要做的步骤是这样的：

1. 下载并包含 doubleScroll。

2. 添加行：

   $('body').find('.dataTables_scrollBody').wrap('<div id="scroll_div"></div>');
   $('#scroll_div').doubleScroll();
   

3. 添加 CSS

   .dataTables_scrollBody {
     overflow-y: visible !important;
     overflow-x: initial !important;
   }
   

   应该这样做（DataTables 1.10.7）

编辑：如果您在顶部有列过滤器，则上述解决方案需要修改，否则标题将不会滚动：

2. 添加行：

   $('body').find('.dataTables_scroll').wrap('<div id="scroll_div"></div>');
   $('#scroll_div').doubleScroll();
   

3. 添加 CSS

   .dataTables_scrollBody {
     overflow-y: visible !important;
     overflow-x: initial !important;
   }
   .dataTables_scrollHead {
     overflow: visible !important;
   }