在宽表列错位数据表固定报头在宽表列错位数据表固定报头(DataTables fixed header

2019-05-12 23:53发布

站内文章 / 移动开发

20 0

别忘想泡老子

女 | 书童

私信

问题

当使用sScrollX ， sScrollXInner和/或sScrollY实现在其内的内容的滚动固定报头表，表中的标题出去对准的与所述主体的在Chrome和IE的其余部分。火狐，而另一方面，它们显示完全。

使用版本1.9.4，据我所知，只有当有大量的数据波动的宽度发生此问题，并与很长/ unwrappable组合在相同的列小的话。此外，有问题的表需要相当宽。

所有这些因素都证明了在这个小提琴：

产量

铬：

IE：

火狐

建议的解决方法

之前，这些解决方案已经提出，但已经对我的执行没有影响 。由于其中的一些建议，我设置为我想，以确保没有其他代码是这种效果促进干净单纯功能的演示。

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

我发现失准头，唯一溶液取出sScrollX和sScrollY ，但你失去了固定的页眉/内部内容的滚动功能这不能算作一个解决方案。所以，可悲的是这是一个临时的设备，而不是修复！

注意

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

我已经通过使用链路尝试可在小提琴的修订历史被观察各种组合http://jsfiddle.net/pratik136/etL73/#REV#其中1 <= #REV# <= 12

历史

StackO
：这个问题以前有人问jQuery的数据表头对准相垂直滚动
但重要的区别是，这个问题的任择议定书提到，他们能够在所有CSS辗转解决这个问题，这是在我的情况不真实，我已经尝试了一些排列，从而以为这个问题值得重新发布的。

外部
这个问题也被标记的数据表论坛：

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

这个问题让我想疯了！请贡献您的想法！

Answer 1:

编辑：请参阅最新的小提琴与“固定头”：

的小提琴。

解决的办法之一就是实现滚动自己，而不是让数据表的插件为您代劳。

我已经采取了你的榜样，并注释掉sScrollX选项。当这个选项不存在数据表插件会简单地把你的表作为是为div容器。该表将伸出屏幕的，因此，要解决这个问题，我们可以把它与所需宽度和overflow属性设置一个div - 这正是最后jQuery的声明做什么 - 它包装现有的表为300像素宽的格。你可能不会需要（在本例中为300px）来设置宽度上在所有包装的div，我在这里有它，这样裁减效果是很容易识别。而且是很好的，不要忘了替换内嵌样式与类。

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

Answer 2:

下面是一个方法来实现固定头表，我不知道这是否是足够您的目的。变化是：

使用“bScrollCollapse”，而不是“sScrollXInner”
不要使用字段集换表
添加一个“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>

Answer 3:

我有在IE9同样的问题。

我将只使用正规编写HTML页面之前，去除所有的空格。

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

Answer 4:

添加上述两行的固定这个问题对我来说

"responsive": true,
"bAutoWidth": true

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

Answer 5:

下面的代码工作。修正的IE浏览器9.0至少应问题。希望这可以帮助

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

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

Answer 6:

在这一个空字符串初始化数据表后触发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 );

});

Answer 7:

为了引导用户，这个固定对我来说：

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

见文章在这里

Answer 8:

我有同样的问题，该代码解决它。我从这篇文章这个解决办法，但我不得不调整的间隔时间为它工作。

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

Answer 9:

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

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

有关更多信息，请参见这里。

Answer 10:

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

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

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

很显然：下行将是您的列的宽度不会适应他们的内容。

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

bAutoWidth和sWidth忽略时sScrollX设置（v1.7.5）

我会尽力找到一个方法去解决这个问题。

Answer 11:

我知道已有答案标记了，但有人有类似的问题，即上面不起作用。我与引导相结合的主题使用它。

还有就是可以在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();

outerWidth（）是包含在jquery.dimensions.js如果你usingg jQuery的较新版本的功能。即。 jQuery的3.1.1.js

什么上面的函数的作用是将它映射原始表的日，然后将它们适用于“克隆”表（固定报头）。在我的情况，他们始终关闭了约5像素对齐时，加上了8px。最有可能不是最好的修复在那里，但提供了一个解决解决方案中的所有其他表，而不必以每桌声明中指定它。它仅适用于Chrome进行了测试，到目前为止，但它应该提供在所有浏览器的评判解决方案。

Answer 12:

如果你想使用scrollY使用：

$（ 'DataTables_sort_wrapper'）的触发器（ “点击”）。

Answer 13:

我，在我的应用程序相同的问题，通过添加以下的CSS代码 -

.dataTables_scrollHeadInner
{
     width: 640px !important;
}

Answer 14:

我有固定的问题列使用BU下面概念

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

Answer 15:

我用这个自动隐藏列的每列数据，在这种情况下，有时其破表结构。我解决这个问题，此数据表$（）columns.adjust（）（$ fn.dataTable.tables（真）。）。 并且这个功能$（ '＃datatableId'）上（ 'draw.dt'，函数（）{}）。 资料表加载后调用。

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

Answer 16:

最近面临同样的问题，并仍在寻找解决方案时，我尝试了我的CSS的东西，检查是否添加到您的细胞（TH和TD）

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

将解决这一问题; 对我来说，我使用了一些HTML / CSS框架，是添加值border-box中的每个元素。

Answer 17:

除了使用sScrollX，sScrollY使用单独的div风格

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

在脚本中调用数据表后下方添加

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

它的许多尝试后完美的工作。

Answer 18:

我有这个同样的问题，看到了很多，似乎从来没有工作，复杂的答案。我做了简单地放在下面重写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

Answer 19:

我只是想出一个办法来解决对齐问题。改变含有静态报头将其固定对准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
    }
});

Answer 20:

试试这个

这对我的作品。我加入的CSS我的解决方案和它的作品...虽然我没有在除了数据表CSS改变什么{边界崩溃：独立;}

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

文章来源: DataTables fixed headers misaligned with columns in wide tables

标签： jquery datatables

别忘想泡老子

女 | 书童

私信

收藏的人(0)

Ta的文章更多文章

0条评论

还没有人评论过~