使用 Google Chrome 启用 scrollX 或 scrollY 时，数据表中出现重复的空标题 [英] Duplicate empty header occur in datatable when enabling scrollX or scrollY when using Google Chrome

问题描述

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

I have a datatable in my program. And I want it to be scrollable horizontally so what I did was like this:

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

结果是这样的(作为示例输出):

It came out like this(as sample output):

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

It doubled the header. How am I going to fix this?

这是另一个示例:

这是我的 HTML 代码:

here's my HTML code:

<table class="table table-striped" id="act_data" width="100%">  <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> 

推荐答案

我在使用 firefox & 时遇到了同样的问题火狐开发者版.根本原因是，当我们设置scrollX:true时，datatable除了表格&标题已经构建.这是为了获得表格内的滚动效果.

I had the same issue with firefox & firefox developer edition. The root cause is, when we set scrollX:true, datatable adds an additional div with a table and a header inside, apart from the table & header already constructed. This is to get the scrolling within table effect.

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

Datatable, tries to set the height to 0px, to hide it. Some browsers don't interpret this properly.

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

要隐藏它，将此行的样式更改为隐藏"会破坏表格的结构.可行的解决方案是让 visibility:'collapse'

To hide it, changing the style to this row to 'hidden' will break the structure of the table. The working solution would be, to have visibility:'collapse'

示例数据表配置:

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

因为它是一张桌子，我们需要有 visibility:'collapse' 而不是 visibility:'hidden' - 关于 可见性 css 属性

since it's a table, we need to have visibility:'collapse' and not visibility:'hidden' - more info on visibility css property

这篇关于使用 Google Chrome 启用 scrollX 或 scrollY 时，数据表中出现重复的空标题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！