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

查看：32 发布时间：2022/1/1 14:30:49 jquery datatables

本文介绍了DataTables 固定标题与宽表中的列不对齐的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

问题

当使用sScrollX、sScrollXInner和/或sScrollY来实现一个固定的表头内容滚动时，表格在 Chrome 和 IE 中与正文的其余部分不一致.另一方面，Firefox 完美地显示了它们.

使用 1.9.4 版本，据我所知，这个问题只发生在有大量宽度波动的数据，并且很长/不可包装的单词与小单词组合在同一列中时.此外，所讨论的表格需要相当宽.

所有这些因素都在这个

IE:

火狐

建议的解决方案

这些解决方案之前已经提出过，但对我的实施没有影响.由于这些建议中的一些，我设置了一个干净的普通演示，因为我想确保没有其他代码导致这种效果.

关闭/删除我所有的 css
setTimeout( function () { oTable.fnAdjustColumnSizing(); }, 10 );
按顺序调用 oTable.fnFilter( "x",0 ) 和 oTable.fnFilter( "",0 )
"sScrollXInner": "100%"
摆脱所有宽度

我找到的针对未对齐标头的唯一解决方案是取出 sScrollX 和 sScrollY，但这不能算作解决方案，因为您丢失了固定标头/inner 内容滚动功能.很遗憾，这是一个临时的 hack，而不是修复！

注意

编辑/播放最新的fiddle.

我尝试了各种组合，可以通过使用链接 http://jsfiddle.net/pratik136/etL73/#REV# where 1 在小提琴的修订历史中观察到<= #REV# <= 12

历史

StackO
之前有人问过这个问题:jQuery Datatables Header Misaligned With Vertical Scrolling
但重要的区别在于，该问题的 OP 提到如果删除所有 CSS，他们能够解决问题，这在我的情况下是不正确的，我已经尝试了一些排列，因此认为这个问题值得重新发布.

外部
此问题也已在 DataTables 论坛上标记:

这个问题把我逼疯了！请贡献你的想法！

解决方案

查看带有固定标题"的最新 Fiddle:

<小时>

小提琴.

解决方案之一是自己实现滚动，而不是让 DataTables 插件为您做.

我以你的例子为例并注释掉了 sScrollX 选项.当此选项不存在时，DataTables 插件将简单地将您的表按原样放入容器 div 中.该表将伸出屏幕，因此，为了解决这个问题，我们可以将其放入具有所需宽度和溢出属性集的 div - 这正是最后一个 jQuery 语句所做的 - 它将现有表包装到一个 300px 宽的 div 中.您可能根本不需要在环绕 div 上设置宽度(在本例中为 300px)，我在这里设置了它，以便很容易看到剪辑效果.并保持良好，不要忘记用类替换内联样式.

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

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:

Output

Chrome:

IE:

Firefox

Note

To edit/play with the latest fiddle.

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:

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

解决方案

EDIT: See the latest Fiddle with "fixed header":

The Fiddle.

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

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

查看全文

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

问题描述

问题

建议的解决方案

注意

历史

Problem

Output

Suggested Solutions

Note

History

相关文章

其他开发最新文章

热门教程

热门工具

登录关闭

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

问题描述

问题

建议的解决方案

注意

历史

Problem

Output

Suggested Solutions

Note

History

相关文章

其他开发最新文章

热门教程

热门工具

登录 关闭

登录关闭