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

Question

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

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

表格的 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;
}

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