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

【问题标题】：How do I add a dropdown button on each row of a jquery datatable如何在 jquery 数据表的每一行上添加一个下拉按钮
【发布时间】：2015-03-31 15:09:20
【问题描述】：

我正在使用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": []
});

有没有办法解决这个问题？

【问题讨论】：

它看起来不像在倒塌。您是否希望它看起来与this screenshot 不同。这是demo in fiddle
如果表格多于一行，我就下。
Nope | Proof。您可能有一些本地 CSS 干扰了解决方案。我会采用工作版本并开始在块中添加你的 CSS，直到你找到有问题的代码。或者使用当前版本并开始在检查器中禁用规则。
我不知道为什么，但是在我的页面中，我可以看到即使是 1 行，下拉列表也位于表格行下方......
this question 的可能重复项...检查一下，看看它是否能为您解决问题。

标签： jquery html css twitter-bootstrap datatables

【解决方案1】：

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

使用类似的东西：

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

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

【讨论】：