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

问题描述

我的程序中有一个datatable。我想要它可以水平滚动，所以我做的是这样的：

  var tableI = $（'＃table_data'） .DataTable（{
bLengthChange：false，
scrollX：true，
dom：'frtp'
}）; 
  

它像这样（作为示例输出）出来：

它将标题翻倍。我如何解决这个问题？

编辑：
这是另一个示例：

这是我的HTML代码：

 < table class =table table-stripedid =act_datawidth =100％> < div style =float：left; width：385px> 
< button type =buttonid =edit_accclass =btn btn-primarydata-toggle =modaldata-target =＃editAcc>< span class =fa fa -edit>编辑帐户< / span>< / button> 
< button type =buttonid =de_actclass =btn btn-primarydata-toggle =modaldata-target =＃DeAcc>< span class =fa fa -edit>激活/停用< / span>< / button> 
<！ - < button type =buttonid =refreshclass =btn btn-linkdata-target =＃DeAcc>< span class =fa fa-refresh >< / span>< / button>  - > 
< a href =<？php echo site_url（'admin / homeAdmin / homepage'）？>？id = 6class =btn btn-link>< span class =fa fa-refresh>< / a> 
< / div>< thead class =header> 
< tr class =well> 
< th style =font-size：14px;>员工ID＃< / th> 
< th style =font-size：14px;>用户名< / th> 
< th style =font-size：14px;>帐户类型< / 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 =hiddenname =userIDid =userIDvalue =<？php echo $ row-> userID;？& /> 
< input type =hiddenname =passid =passvalue =<？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& firefox开发者版。根本原因是，当我们设置 scrollX：true 时，datatable会添加一个附加的div，里面有一个表格和一个标题，除了表&标题已经构建。这是为了使表格效果中的滚动。

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

 < tr style =height：0px; role =row> 
  

要隐藏它，将此行的样式更改为隐藏将会破坏表的结构。工作解决方案将是可见性：'collapse'

样本数据配置配置：

  tableElement.DataTable（{
scrollX：true，
initComplete：function（settings，json）{
 $（'。dataTables_scrollBody thead tr'）。css（{visibility：'collapse'}）; 
} 
 //其他数据式配置... 
}）; 
  

由于它是一个表，我们需要有可见性：崩溃而不是可见性：隐藏 - 有关可见性CSS属性的更多信息

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?

EDIT: Here's another sample:

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> 

解决方案

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, tries to set the height to 0px, to hide it. Some browsers don't interpret this properly.

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

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'

Sample datatable configuration:

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

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屋！