DataTable的固定标题与宽表中的列不对齐 [英] DataTables fixed headers misaligned with columns in wide tables

问题描述

问题

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

根据我可以看出，使用1.9.4版本，这个问题只发生在有大量数据的时候波动宽度，以及与较小/相同列组合的非常长/不可包装的单词。此外，所涉及的表格还需要相当广泛。

所有这些因素都在这个小提琴中展示：

IE： / strong>

Firefox

建议的解决方案

这些解决方案之前已经建议，但对我没有影响实施。由于其中一些建议，我设置了一个干净的简单的香草演示，因为我想确保没有其他代码有助于这种效果。

• 关闭/删除我所有的css


• setTimeout（function（）{oTable.fnAdjustColumnSizing（）;}，10）;


• 调用 oTable.fnFilter（x，0）和 oTable.fnFilter（，0 ）


• sScrollXInner：100％


• 摆脱所有宽度

我找到的对齐标题的唯一解决方案是取出 sScrollX 和 sScrollY ，但是当您丢失固定的标题/内容滚动功能时，不能将其视为解决方案。那么可悲的是，这是一个暂时的黑客，而不是修复！

注意

使用最新的小提琴进行编辑/播放： http://jsfiddle.net/pratik136/etL73

我尝试了各种组合，可以使用链接 http://jsfiddle.net/pratik136/etL73/#REV# 其中 1< =＃REV＃< = 12

历史

StackO

此问题之前已经提出： jQuery Datatables标题与垂直滚动不一致

但重要的区别是该问题的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

这个issu e推动我坚果！请提供您的想法！

解决方案

编辑：
看到最新的Fiddle与固定标题： http://jsfiddle.net/ruslans_uralovs/zDaGk/

---

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

其中一个解决方案是实现自己滚动，而不是让DataTables插件为您做。

我已经拿过你的例子，并评论了sScrollX选项。当此选项不存在时，DataTables插件将简单地将您的表放在容器div中。这个表将伸出屏幕，以便修复，我们可以把它放在一个需要的宽度和溢出preperty集的div - 这正是最后一个jQuery语句所做的 - 它将现有的表格包装成一个300px宽的div。你可能不需要在包装div上设置宽度（在这个例子中为300px），我在这里放置剪辑效果很容易看到。
不错，别忘了用一个类替换内联样式。 （$）$（$）$（$）$（$）$（$）$（$） ）.dataTable（{
iDisplayLength：-1，
bPaginate：true，
iCookieDuration：60，
bStateSave：false，
bAutoWidth：false，
// true
bScrollAutoCss：true，
bProcessing：true，
bRetrieve：true，
bJQueryUI ：
//sDom：'t'，
sDom：'<HCTrf> t<Flip>'，
aLengthMenu [[25，50，100，-1]，[25，50，100，全部]]，
//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'）。

Problem

When using the sScrollX, sScrollXInner and/or sScrollY to achieve a fixed header table with its inner content scrolling, the headers of the table go out of alignment with the rest of the body in Chrome and IE. Firefox on the other hand displays them perfectly.

Using the version 1.9.4, as far as I can tell, this issue only occurs when there is a lot of data with fluctuating widths, and with words that are very long/unwrappable combined in the same columns as small ones. Also the table in question needs to be fairly wide.

All these factors are demonstrated in this fiddle: http://jsfiddle.net/pratik136/etL73/embedded/result/

Output

Chrome:

IE:

Firefox

Suggested Solutions

These solutions have been suggested before but have had no effect on my implementation. Owing to some of these suggestions, I setup a clean plain vanilla demo as I wanted to ensure that no other code was contributing to this effect.

• turn-off/remove all my css
• setTimeout( function () { oTable.fnAdjustColumnSizing(); }, 10 );
• calling oTable.fnFilter( "x",0 ) and oTable.fnFilter( "",0 ) in that order
• "sScrollXInner": "100%"
• get rid of all widths

The only solution that I found to the misaligned headers was taking out sScrollX and sScrollY, but this can't be counted as a solution as you lose the fixed header/inner content scrolling functionality. So sadly it's a temporary hack, not a fix!

Note

To edit/play with the latest fiddle: http://jsfiddle.net/pratik136/etL73

I have tried various combinations which can be observed in the revision history of the fiddle by using the link http://jsfiddle.net/pratik136/etL73/#REV# where 1 <= #REV# <= 12

History

StackO
This question has been asked before: jQuery Datatables Header Misaligned With Vertical Scrolling
but the vital difference is that the OP of that question mentioned that they were able to fix the issue if all CSS was removed, which is untrue in my case, and I have tried a few permutations, thus thought the question worthy of a repost.

External
This issue has also been flagged on the DataTables forum:

• 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
• My bug report: http://datatables.net/forums/discussion/12491/datatables-header-alignment-issue-refresh#Item_1

This issue has driven me nuts! Please contribute your thoughts!

解决方案

EDIT: See latest Fiddle with "fixed header": http://jsfiddle.net/ruslans_uralovs/zDaGk/

---

The Fiddle: http://jsfiddle.net/hDgHs/

One of the solutions is to implement scrolling yourself instead of letting DataTables plugin do it for you.

I've taken your example and commented out sScrollX option. When this option is not present DataTables plugin will simply put your table as is into a container div. This table will stretch out of the screen therefore to fix that we can put it into a div with required width and an overflow preperty set - this is exactly what the last jQuery statement does - it wraps existing table into a 300px wide div. You probably will not need to set the width on the wrapping div at all (300px in this example), i have it here so that clipping effect is easily visible. And be nice, don't forget to replace that inline style with a class.

$(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())});

这篇关于DataTable的固定标题与宽表中的列不对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！