DataTables固定标题与宽表中的列未alignment

问题

当使用sScrollXsScrollXInner和/或sScrollY来实现内部滚动内容的固定表头时,表格的标题与Chrome和IE中的其余部分不一致。 另一方面,Firefox可以完美地显示它们。

使用版本1.9.4,据我所知,这个问题只发生在有大量宽度波动的数据的情况下,并且在很长的/不可打包的文件中与小的文件在同一列中组合在一起。 此外,表中的问题需要相当广泛。

所有这些因素在这个小提琴演示: http : //jsfiddle.net/pratik136/etL73/embedded/result/

产量

铬:
Chrome屏幕截图

IE:
IE9截图

火狐
Firefox截图

build议解决scheme

这些解决scheme之前已经提出,但对我的实施没有影响 。 由于其中的一些build议,我设置了一个干净的普通香草演示,因为我想确保没有其他代码对这种效果有所贡献。

  • closures/删除我所有的CSS
  • setTimeout( function () { oTable.fnAdjustColumnSizing(); }, 10 );
  • oTable.fnFilter( "x",0 )调用oTable.fnFilter( "x",0 )oTable.fnFilter( "",0 )
  • "sScrollXInner": "100%"
  • 摆脱所有的宽度

我find的错误标题唯一的解决scheme是取出sScrollXsScrollY ,但这不能算作一个解决scheme,因为你失去了固定头/内容滚动function。 很遗憾,这只是一个暂时的黑客,而不是修复!

注意

编辑/使用最新的小提琴: http : //jsfiddle.net/pratik136/etL73

我已经尝试了各种组合,可以在小提琴的修订历史logging中使用链接http://jsfiddle.net/pratik136/etL73/#REV#其中1 <= #REV# <= 12

历史

StackO
这个问题之前已经被问到: jQuery Datatables Header与垂直滚动不一致
但是最大的不同是,这个问题的OP提到,如果所有的CSS都被删除了,他们能够解决这个问题,这对我来说是不真实的,我尝试了一些排列,因此认为这个问题值得重新发布。

外部
这个问题也被标记在DataTables论坛上:

  • http://datatables.net/forums/discussion/7395/sscrolly-and-sscrollx-broken/p1
  • http://datatables.net/forums/discussion/7778/vertical-scrolling-messes-up-column-header-alignment#Item_1
  • http://datatables.net/forums/discussion/3835/width-columns-problem-in-chrome-safari/p1
  • 我的错误报告: http : //datatables.net/forums/discussion/12491/datatables-header-alignment-issue-refresh#Item_1

这个问题使我疯狂! 请贡献你的想法!

编辑:查看最新的小提琴与“固定标题”: http : //jsfiddle.net/ruslans_uralovs/zDaGk/


小提琴: http : //jsfiddle.net/hDgHs/

其中一个解决scheme是实现滚动,而不是让DataTables插件为你做。

我已经把你的例子和sScrollX选项注释掉了。 当这个选项不存在时,DataTables插件将简单地把你的表放到一个容器div中。 这个表格将伸出屏幕,因此我们可以把它放到一个具有所需宽度的div和一个溢出属性集合中 – 这正是最后一条jQuery语句所做的 – 它将现有的表格包装成300px宽的div。 你可能根本不需要在包装div上设置宽度(在这个例子中是300px),我在这里是这样的,所以剪切效果很容易看到。 如果不错,不要忘了用一个类来replace这个内联样式。

 $(document).ready(function() { var stdTable1 = $(".standard-grid1").dataTable({ "iDisplayLength": -1, "bPaginate": true, "iCookieDuration": 60, "bStateSave": false, "bAutoWidth": false, //true "bScrollAutoCss": true, "bProcessing": true, "bRetrieve": true, "bJQueryUI": true, //"sDom": 't', "sDom": '<"H"CTrf>t<"F"lip>', "aLengthMenu": [[25, 50, 100, -1], [25, 50, 100, "All"]], //"sScrollY": "500px", //"sScrollX": "100%", "sScrollXInner": "110%", "fnInitComplete": function() { this.css("visibility", "visible"); } }); var tableId = 'PeopleIndexTable'; $('<div style="width: 300px; overflow: auto"></div>').append($('#' + tableId)).insertAfter($('#' + tableId + '_wrapper div').first())}); 

以下是实现一个固定的头表的一种方式,我不知道它是否足够你的目的。 变化是:

  1. 使用“bScrollCollapse”而不是“sScrollXInner”
  2. 不要使用fieldset来换行
  3. 添加一个“div.box”css类

它似乎完全在我的本地机器上工作,但它不完全使用小提琴工作。 似乎小提琴添加了一个CSS文件(normalize.css),在某种方式打破了插件的CSS(相当肯定,我可以充分工作也在小提琴添加一些CSS清晰的规则,但没有时间进一步调查现在)

我的工作代码片段如下。 希望这可以帮助。

 <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type='text/javascript' src='http://code.jquery.com/jquery-1.8.2.js'></script> <script type='text/javascript' src="http://datatables.net/release-datatables/media/js/jquery.dataTables.min.js"></script> <style type='text/css'> div.box { height: 100px; padding: 10px; overflow: auto; border: 1px solid #8080FF; background-color: #E5E5FF; } .standard-grid1, .standard-grid1 td, .standard-grid1 th { border: solid black thin; } </style> <script type='text/javascript'> $(window).load(function(){ $(document).ready(function() { var stdTable1 = $(".standard-grid1").dataTable({ "iDisplayLength": -1, "bPaginate": true, "iCookieDuration": 60, "bStateSave": false, "bAutoWidth": false, //true "bScrollAutoCss": true, "bProcessing": true, "bRetrieve": true, "bJQueryUI": true, "sDom": '<"H"CTrf>t<"F"lip>', "aLengthMenu": [[25, 50, 100, -1], [25, 50, 100, "All"]], "sScrollX": "100%", //"sScrollXInner": "110%", "bScrollCollapse": true, "fnInitComplete": function() { this.css("visibility", "visible"); } }); }); }); </script> </head> <body> <div> <table class="standard-grid1 full-width content-scrollable" id="PeopleIndexTable"> <thead> <!-- put your table header HTML here --> </thead> <tbody> <!-- put your table body HTML here --> </tbody> </table> </div> </body> </html> 

我在IE9上遇到同样的问题。

在将HTML写入页面之前,我将使用RegExp去除所有的空格。

 var Tables=$('##table_ID').html(); var expr = new RegExp('>[ \t\r\n\v\f]*<', 'g'); Tables= Tables.replace(expr, '><'); $('##table_ID').html(Tables); oTable = $('##table_ID').dataTable( { "bPaginate": false, "bLengthChange": false, "bFilter": false, "bSort": true, "bInfo": true, "bAutoWidth": false, "sScrollY": ($(window).height() - 320), "sScrollX": "100%", "iDisplayLength":-1, "sDom": 'rt<"bottom"i flp>' } ); 

添加这两行解决了这个问题给我

 "responsive": true, "bAutoWidth": true 

现在有一个响应式插件可用: https : //datatables.net/extensions/responsive/ 。 但是,根据我的经验,我发现还有一些错误。 这仍然是迄今为止我find的最好的解决scheme。

下面的代码工作。 更正了IE 9.0的问题。 希望这可以帮助

 var oTable = $('#tblList').dataTable({ "sScrollY": "320px", "bScrollCollapse": true, }); setTimeout(function(){ oTable.fnAdjustColumnSizing(); },10); 

我有同样的问题,这个代码解决了这个问题。 我从这篇文章中得到了这个解决scheme,但我不得不调整它的工作时间间隔。

 setTimeout(function(){ oTable.fnAdjustColumnSizing(); },50); 

试试这个,下面的代码解决了我的问题

 table.dataTable tbody th,table.dataTable tbody td { white-space: nowrap; } 

欲了解更多信息,请参阅这里 。

使用空白string初始化DataTable后,触发DataTablesearchfunction。 它会自动调整与tbody错位。

 $( document ).ready(function() { $('#monitor_data_voyage').DataTable( { scrollY:150, bSort:false, bPaginate:false, sScrollX: "100%", scrollX: true, } ); setTimeout( function(){ $('#monitor_data_voyage').DataTable().search( '' ).draw(); }, 10 ); }); 

添加table-layout: fixed到您的表格样式(CSS或样式属性)。

浏览器将停止应用其自定义algorithm来解决大小限制。

在网页上查找有关处理固定表格布局中列宽的信息(这里有两个简单的SO问题: 这里和这里 )

显然:缺点是你的专栏的宽度不适应他们的内容。


[编辑]当我使用FixedHeader插件的时候,我的回答很奏效,但是在数据表的论坛上发表的post似乎表明使用sScrollX选项时会出现其他问题:

设置sScrollX时忽略bAutoWidth和sWidth(v1.7.5)

我会尽力find一个方法来解决这个问题。

对于bootstrap用户来说,这对我来说是固定的:

  $($.fn.dataTable.tables(true)).DataTable() .columns.adjust() .fixedColumns().relayout(); 

在这里看到文章

我知道已经有一个答案了,但对于有类似问题的人来说,上面的方法是行不通的。 我将它与引导主题一起使用。

有一行可以在dataTables.fixedHeader.js文件中修改。 该函数的默认布局如下所示。

  _matchWidths: function (from, to) { var get = function (name) { return $(name, from) .map(function () { return $(this).width(); }).toArray(); }; var set = function (name, toWidths) { $(name, to).each(function (i) { $(this).css({ width: toWidths[i], minWidth: toWidths[i] }); }); }; var thWidths = get('th'); var tdWidths = get('td'); set('th', thWidths); set('td', tdWidths); }, 

改变

  return $(this).width(); 

  return $(this).outerWidth(); 

如果你使用的是更新版本的jquery,outerWidth()是一个包含在jquery.dimensions.js中的函数。 即。 jQuery的3.1.1.js

上面的函数做的是映射原始表的th,然后将它们应用到“克隆”表(固定头)。 在我的情况下,他们总是偏离约5px至8px错位。 最有可能不是最好的解决scheme,但提供了解决scheme中的所有其他表的解决scheme,而无需指定每个表声明。 到目前为止,它只在Chrome中进行过testing,但是它应该在所有浏览器上提供一个判断解决scheme。

如果你想使用scrollY使用:

$( 'DataTables_sort_wrapper')的触发器( “点击”)。

我在我的应用程序中通过在css中添加下面的代码来修复相同的问题 –

 .dataTables_scrollHeadInner { width: 640px !important; } 

我已经使用下面的概念修复了列问题bu

 $(".panel-title a").click(function(){ setTimeout( function(){ $('#tblSValidationFilerGrid').DataTable().search( '' ).draw(); }, 10 ); }) 

面对同样的问题最近,仍然在寻找解决scheme,当我尝试了一些我的CSS,检查是否添加到您的单元格(th和td)

 -webkit-box-sizing: content-box; -moz-box-sizing: content-box; -sizing: content-box; 

将解决这个问题; 对我来说,我正在使用一些html / css框架,在每个元素border-box添加一个border-box值。

而使用sScrollX,sScrollY使用单独的div风格

 .scrollStyle { height:200px;overflow-x:auto;overflow-y:scroll; } 

在脚本中的数据表调用之后添加

  jQuery('.dataTable').wrap('<div class="scrollStyle" />'); 

它经过多次尝试完美运作

我有这个相同的问题,看到了很多复杂的答案,似乎从来没有工作。 我确实通过覆盖下面的CSS(site.css)解决了这个问题,并在Chrome,IE和Firefox中修复了它:

 table.display td { padding: 0px 5px; } /* this is needed for IE and Firefox if using horizontal scroll*/ table{ max-width: none; min-height: 0%; } 

这覆盖了datatable.jui.css中的CSS

我只是想出一个办法来解决alignment问题。 更改包含静态头的div的宽度将修复其alignment。 我发现的最佳宽度是98%。 请参阅代码。

自动生成的div:

<div class="dataTables_scrollHead" style="overflow: hidden; position: relative; border: 0px none; width: 100%;">

这里的宽度是100%,初始化和重新加载数据表时将其更改为98%。

 jQuery('#dashboard').dataTable({ "sEcho": "1", "aaSorting": [[aasortvalue, 'desc']], "bServerSide": true, "sAjaxSource": "NF.do?method=loadData&Table=dashboardReport", "bProcessing": true, "sPaginationType": "full_numbers", "sDom": "lrtip", // Add 'f' to add back in filtering "bJQueryUI": false, "sScrollX": "100%", "sScrollY": "450px", "iDisplayLength": '<%=recordCount%>', "bScrollCollapse": true, "bScrollAutoCss": true, "fnInitComplete": function () { jQuery('.dataTables_scrollHead').css('width', '98%'); //changing the width }, "fnDrawCallback": function () { jQuery('.dataTables_scrollHead').css('width', '98%');//changing the width } }); 

尝试这个

这对我的作品…我为我的解决scheme添加了CSS,它的工作原理…虽然我没有改变任何数据表的CSS除了{border-collapse:separate;}

 .dataTables_scrollHeadInner { /*for positioning header when scrolling is applied*/ padding:0% ! important }