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

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加载的datatable。你需要调整一下。

要做的步骤是这样的：

1. 下载并加入doubleScroll。

2. 添加行：

   public static void main(String[]args){
       for( int j = 32; j < 122; /* don't increment j here */){
           // print 10 chars per line
           for (int col=0; col<10; col++, j++ /* increment j here instead */) {
               System.out.print((char)j);
           }
           System.out.println();
       }
   }
   

3. 添加CSS

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

   应该这样做（DataTables 1.10.7）

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

1. 添加行：

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

2. 添加CSS

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