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

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

最佳答案

并非完全不可能。

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

要做的步骤是这样的:

下载并包含 doubleScroll。

添加行:

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

添加 CSS

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

应该这样做 (DataTables 1.10.7)

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

添加行:

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

添加 CSS

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

关于javascript - 数据表水平滚动条显示在顶部而不是底部，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/24453467/