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

Datatables(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;
}

标签：datatables,javascript,jquery
来源： https://codeday.me/bug/20191121/2052763.html