jquery - DataTables 修复了与宽表中的列不对齐的标题

Question

问题

当使用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%"
摆脱所有宽度

我发现的未对齐标题的唯一解决方案是取出sScrollXand sScrollY，但这不能算作解决方案，因为您失去了固定的标题/内部内容滚动功能。可悲的是，这是一个临时的黑客攻击，而不是修复！

笔记

编辑/播放最新的小提琴。

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

历史

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

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

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

score 18 · Accepted Answer

编辑：查看带有“固定标题”的最新小提琴：

小提琴。_

一种解决方案是自己实现滚动，而不是让 DataTables 插件为您完成。

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

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

score 13 · Accepted Answer

下面是实现固定表头的一种方式，不知道是否满足你的目的。变化是：

使用“bScrollCollapse”而不是“sScrollXInner”
不要使用字段集来包装表格
添加一个“div.box”css类

它似乎完全可以在我的本地机器上运行，但使用 Fiddle 并不能完全运行。似乎 Fiddle 添加了一个 css 文件（normalize.css），它在某种程度上破坏了插件 css（很确定我也可以在 Fiddle 中充分工作，添加一些 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>

score 4 · Accepted Answer

我在 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>'
} );

score 4 · Accepted Answer

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

"responsive": true,
"bAutoWidth": true

现在有一个响应式插件可用：https ://datatables.net/extensions/responsive/ 。但是，根据我的经验，我发现仍然存在一些错误。到目前为止，它仍然是我找到的最佳解决方案。

score 4 · Accepted Answer

For bootstrap users, this fixed it for me:

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

See article here

score 2 · Accepted Answer

下面的代码有效。至少更正了 IE 9.0 上的问题。希望这可以帮助

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

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

score 2 · Accepted Answer

我有同样的问题，这段代码解决了它。我从这篇文章中得到了这个解决方案，但我必须调整间隔时间才能让它工作。

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

score 2 · Accepted Answer

在初始化 DataTable 后触发 DataTable 搜索功能，其中包含一个空白字符串。它将自动调整thead与的错位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 );

});

score 1 · Accepted Answer

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

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

有关更多信息，请参阅此处。

score 1 · Accepted Answer

我将它用于根据列数据自动隐藏列，在这种情况下，有时是它的中断表结构。我用这个$($.fn.dataTable.tables(true)).DataTable().columns.adjust();解决了这个问题 这个函数 $('#datatableId').on('draw.dt', function () { }); 表数据加载后调用。

$('#datatableId').on('draw.dt', function () {
    $($.fn.dataTable.tables(true)).DataTable().columns.adjust();
})

score 0 · Accepted Answer

添加table-layout: fixed到表格的样式（css 或样式属性）。

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

在网上搜索有关在固定表格布局中处理列宽的信息（这里有 2 个简单的 SO 问题：这里和这里）

显然：缺点是您的列的宽度不会适应它们的内容。

[编辑] 当我使用 FixedHeader 插件时，我的回答有效，但是数据表论坛上的帖子似乎表明使用该sScrollX选项时会出现其他问题：

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

我会尝试找到解决此问题的方法。

score 0 · Accepted Answer

尝试这个

这对我有用...我为我的解决方案添加了 css 并且它有效...虽然我没有更改数据表 css 中的任何内容，除了 {border-collapse:separate;}

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

score 0 · Accepted Answer

0

如果你想使用 scrollY 使用：

$('.DataTables_sort_wrapper').trigger("点击");

于 2017-09-06T17:58:20.877 回答

score 0 · Accepted Answer

在尝试了我所能做的一切之后，我只是添加了"autoWidth": true它，它对我有用。

score 0 · Accepted Answer

我通过在 css 中添加以下代码解决了我的应用程序中的相同问题 -

.dataTables_scrollHeadInner
{
     width: 640px !important;
}

score 0 · Accepted Answer

我已经使用以下概念修复了列问题

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

score 0 · Accepted Answer

我知道已经标记了一个答案，但是对于有类似问题的人来说，上述问题并不适用。我将它与引导主题结合使用。

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 中的函数。IE。jquery-3.1.1.js

上述函数的作用是映射原始表的 th，然后将它们应用于“克隆”表（固定标题）。在我的情况下，当它们未对齐时，它们总是偏离大约 5px 到 8px。很可能不是最好的解决方案，但为解决方案中的所有其他表提供了解决方案，而无需为每个表声明指定它。到目前为止，它只在 Chrome 中进行了测试，但它应该在所有浏览器上提供裁决解决方案。

score -1 · Accepted Answer

我只是想出了一种解决对齐问题的方法。更改包含静态标题的 div 的宽度将修复其对齐方式。我发现的最佳宽度是 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
    }
});

score -1 · Accepted Answer

而是使用 sScrollX,sScrollY 使用单独的 div 样式

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

在脚本中的数据表调用之后添加以下内容

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

经过多次尝试，它工作得很好。

score -1 · Accepted Answer

最近遇到了同样的问题，当我在我的 css 上尝试一些东西时仍在寻找解决方案，检查是否添加到你的单元格（th 和 td）

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

将解决此问题；对我来说，我使用了一些 html/css 框架，它border-box在每个元素中添加了一个值。

score -1 · Accepted Answer

我遇到了同样的问题，并且看到了许多似乎从未起作用的复杂答案。我确实通过简单地覆盖以下 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

jquery - DataTables 修复了与宽表中的列不对齐的标题

问题

输出

建议的解决方案

笔记

历史

21 回答 21

Related

Reference