Question

我使用datatables插件在我的应用程序中将数据显示为表格。

我想在表格的每一行添加Bootstrap Dropdown Buttons或Javascript Dropdowns。但是下拉部分隐藏在表格行下面，我无法修复它。

表格的html是：

<table id="swcmtable" cellspacing="0" width="100%"
       class="table table-striped table-hover dt-responsive" >
  <thead>
    <tr>
      <th> ID</th>  
      <th>Modifier</th>  
      <th> Created Time</th> 
      <th> Modified Time</th> 
      <th> Edit</th> 
      <th> Actions</th>  
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>100</td>
      <td>Admin</td>
      <td>10/06/2014</td>
      <td>11/02/2015</td>
      <td>
        <button type="button" class="btn btn-primary btn-sm">
          Edit
        </button>
      </td>

      <td>
        <div class="dropdown">
          <button id="dLabel" type="button" data-toggle="dropdown" 
                  aria-haspopup="true" aria-expanded="false">
            Dropdown trigger
            <span class="caret"></span>
          </button>
          <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
          </ul>
        </div>
      </td>

    </tr>

  </tbody>                        
</table>

我按如下方式初始化数据表：

$('#swcmtable').DataTable({
  "iDisplayLength" : 50,
  "aaSorting": []
});

有什么方法可以解决这个问题吗？

Answer 1

根据您提供的详细信息，很明显您使用自定义样式隐藏数据表中的文本溢出。此外，由于您已指定此样式很重要，因此您可以尝试仅为需要截断额外文本的列隐藏文本溢出，并且不要将此样式应用于整个表。

使用类似：

table.dataTable td:nth-child(2) 
{
    max-width:120px;
    word-wrap: break-word;
    white-space: nowrap;
    overflow: hidden;  
    text-overflow: ellipsis;
}

此代码将仅为表的第二列隐藏文本溢出，其余列不会受到影响。我相信这应该适合您的情况

如何在jquery数据表的每一行上添加下拉按钮

1 个答案: