使用 Google Chrome 启用 scrollX 或 scrollY 时，数据表中出现重复的空标题

Posted 2023-05-07

【中文标题】使用 Google Chrome 启用 scrollX 或 scrollY 时，数据表中出现重复的空标题

【英文标题】：Duplicate empty header occur in datatable when enabling scrollX or scrollY when using Google Chrome

【发布时间】：2015-05-27 09:20:51

【问题描述】：

我的程序中有一个数据表。我希望它可以水平滚动，所以我所做的是这样的：

var tableI = $('#table_data').DataTable(
    "bLengthChange": false,
    "scrollX": true,
     "dom": 'frtp'
);

结果是这样的（作为示例输出）：

它使标题翻了一番。我将如何解决这个问题？

编辑： 这是另一个示例：

这是我的 html 代码：

<table class="table table-striped" id="act_data" >  <div style="float:left;width:385px" >
    <button type="button" id="edit_acc" class="btn btn-primary" data-toggle="modal" data-target="#editAcc"><span class=" fa fa-edit "> Edit Account</span></button>
      <button type="button" id="de_act" class="btn btn-primary" data-toggle="modal" data-target="#DeAcc"><span class=" fa fa-edit "> Activate/Deactivate</span></button>
      <!-- <button type="button" id="refresh" class="btn btn-link"  data-target="#DeAcc"><span class="fa fa-refresh"></span></button>-->
      <a href="<?php echo site_url('admin/homeAdmin/homepage')?>?id=6" class="btn btn-link"><span class="fa fa-refresh"></a>
    </div><thead class="header">
      <tr class="well">
        <th style="font-size: 14px;">Employee ID#</th>
        <th style="font-size: 14px;">Username</th>
        <th style="font-size: 14px;">Account Type</th>
        <th style="font-size: 14px;">Status</th>
      </tr>
    </thead>

    <tbody>
      <?php if($result != NULL)?>
        <?php foreach($result as $row) ?>
            <tr>
               <td style="font-size: 15px;padding-left: 20px;">
                   <?php echo $row->employeeID;?>
                   <input type="hidden" name="userID" id="userID" value="<?php  echo $row->userID;?>" />
                   <input type="hidden" name="pass" id="pass" value="<?php  echo $row->password;?>" />

              </td>

              <td style="font-size: 15px;padding-left: 20px;">
                   <?php echo $row->username;?>
              </td>
              <td style="font-size: 15px;padding-left: 20px;">
                   <?php echo $row->usertype;?>
              </td>
              <td style="font-size: 15px;padding-left: 20px;">
               <?php echo $row->status; ?>
               </td>

          </tr>
        <?php ?>
      <?php ?>
    </tbody>
  </table> 

【问题讨论】：

你能用一些静态数据摆弄它吗？

@MokshShah，我在我的问题中添加了另一个示例..

标记 (HTML) 的外观如何？

@davidkonrad，请查看问题中添加的 html 代码。谢谢 :)

为什么表格中有一个 div？不确定它是否相关，但你应该把它放在桌子外面。

【参考方案1】：

我在使用 firefox 和 firefox developer edition 时遇到了同样的问题。根本原因是，当我们设置scrollX:true 时，除了已经构建的表和表头之外，datatable 添加了一个额外的 div，其中包含一个表和一个表头。这是为了获得表格内的滚动效果。

数据表，尝试将高度设置为 0px，以隐藏它。一些浏览器不能正确解释这一点。

<tr style="height: 0px;" role="row"> 

要隐藏它，将此行的样式更改为“隐藏”会破坏表格的结构。可行的解决方案是拥有visibility:'collapse'

示例数据表配置：

tableElement.DataTable(
    "scrollX": true,
    "initComplete": function(settings, json) 
        $('.dataTables_scrollBody thead tr').css(visibility:'collapse');
    
    //other datatable configurations...  
);

因为它是一张桌子，我们需要visibility:'collapse' 而不是visibility:'hidden' - 有关visibility css property 的更多信息

【讨论】：

我整天都在处理这个问题，为了让它工作，我不得不使用'drawCallback'配置属性而不是'initComplete'配置属性来让它工作。所以： drawCallback: function () $('.dataTables_scrollBody thead tr').css( visibility: 'collapse' );

我遇到了同样的问题。您的解决方案确实使重复的标题行消失了，但现在表格标题与实际数据不一致。有什么线索吗？谢谢

我不得不把它放在 initComplete 和 drawCallback 上

是的，我把它放在initComplete中，然后也监听draw.dt事件，就像drawCallback函数一样。感谢分享这个答案！

它有效，但是当我们调整大小或尝试添加数据表的fixedColumns 选项时它会重新出现

【参考方案2】：

解决方案 1：

要解决此问题，请使用"scrollXInner": true 避免使用"scrollX": true"

var tableI = $('#table_data').DataTable(
    "bLengthChange": false,
    "scrollX": true, //Do Not Use This (Remove This Line)
    "scrollXInner": true //Use This (Add This Line)
     "dom": 'frtp'
);

解决方案 2：

或者你可以添加这个CSS

.dataTables_scrollBody thead tr[role="row"]
    visibility: collapse !important;

【讨论】：

解决方案 2 对我有用。但是，它在标题和可滚动正文之间留下了一个空格，因此您还需要在 css 中添加它： .dataTables_scrollHeadInner table margin-bottom: 0px !important;

【参考方案3】：

我在 Google Chrome 上遇到了同样的问题。这是修复：

.dataTable(

  "processing": false,
  "serverSide": false,
  "autoWidth": true,
  "columnDefs": [
    "orderable": false, "targets": [5, 6]
  ],
  "order": [1, 'asc'],
  "dom": 'l<"toolbar">frtip',
  drawCallback: function ()  // this gets rid of duplicate headers
      $('.dataTables_scrollBody thead tr').css( display: 'none' ); 
  ,
  scrollY: '65vh',
  scrollCollapse: true,
  paging: false
);

【讨论】：

这为我的 Chrome 修复了它。

如果显示设置为none，则列宽与第一个表头不匹配，所以改用visibility:'collapse'。

【参考方案4】：

就我而言，解决方案很简单。只需将其包含在您的 css 中即可：

/* Override sorting header --> DataTable Bug */
.dataTables_scrollBody > table > thead > tr 
    visibility: collapse;
    height: 0px !important;

【参考方案5】：

塞拉姆的解释很好。更好的方法是只使用 CSS

div.dataTables_scrollBody thead            
    display: none;

【参考方案6】：

这会隐藏第二个标题并删除标题和正文之间的空白。

<style>
     .dataTables_scrollBody thead tr 
         visibility: collapse;
     

     .dataTables_scrollBody 
         margin-top: -10px;
      
</style>

【参考方案7】：

试试这样的：

"scrollX": '100%',

"scrollXInner": '125%',

【讨论】：

重复的标题仍然存在.. :(

我刚刚注意到，如果我使用 mozilla firefox，重复的标题是不存在的，但是当我使用谷歌浏览器时，重复的标题是存在的..

【参考方案8】：

这对我有用：

$('#DataTables_Table_0').on( 'draw.dt' function() 
    $('.dataTables_scrollBody thead tr').addClass('hidden')

参考：geam's March 2015 answer on datatables.net forum

【讨论】：

这导致我的标题行和正文列不对齐。有效的 CSS 是来自 Sairam Krish 的答案的 visibilty: collapse;。

@ChuckL ：感谢更新；尽管由于这样的数据表的错误性质，我已经转移到引导表上。甚至我的标题和正文列也没有对齐，并且在每次刷新时，它们都会自动对齐？！当时没调试。

【参考方案9】：

最好的方法是使用

dataTable.columns.adjust();

关于初始化/绘制回调

【参考方案10】：

在 javascript 文件中的行下方添加。 serverSide：true，processing：true，scrollX：“100％”，将以下代码添加到您的页面。 .dataTables_scrollBody thead tr[role="row"] 可见性：折叠！重要；

【讨论】：

您应该使用可用的 Markdown 语法来格式化您的答案中的代码 sn-ps（它甚至可以让您知道您正在使用哪种编程语言）。请查阅语法，以便让所有阅读它的人更清楚地了解答案。

【参考方案11】：

您可以在 CSS 中使用以下代码：

div.dataTables_scrollHeadInner table  margin-bottom: 0px !important;