javascript - 数据表水平滚动条显示在顶部而不是底部

Question

Datatables(JQuery 插件)有 scrollx 选项，当设置为 true 时将添加滚动条，该滚动条将出现在表格的底部，是否有一个选项也可以将其显示在表格的顶部。

Answer 1

并非完全不可能。

您可以在 http://progrnotes.blogspot.com.ee/2013/07/horizontal-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)

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

1. 添加行:

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

2. 添加 CSS

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