Question

我正在使用一个jquery数据表，我正在试图找出如何获取工具提示来显示文本被省略的文本列上的所有文本。我正在使用数据表“sAjaxSource”属性，该属性自动从服务器获取表数据，因此我无法控制jquery数据表插入到tbody中的html。

http://jsfiddle.net/x9o891c5/132/

的CSS：

#example tr td  {
 max-width: 250px;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
}

jquery的：

$(document).ready(function() {
    $('#example').dataTable();
} );

HTML：

<table id="example" class="display" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </thead>

    <tfoot>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </tfoot>

    <tbody>
        <tr>
            <td>Tiger Nixon</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011/04/25</td>
            <td>$320,800</td>
        </tr>
        <tr>
            <td>Garrett </td>
            <td>Accountant</td>
            <td>Tokyo</td>
            <td>63</td>
            <td>2011/07/25</td>
            <td>$170,750</td>
        </tr>

        <tr>
            <td>ZoWinGarrett WintersGarrett WintersGarrett WintersGarrett WintersGarrett WintersGarrett WintersGarrett WintersGarrett WintersGarrett WintersGarrett WintersGarrett WintersGarrett WintersGarrett WintersGarrett WintersGarrett WintersGarrett WintersGarrett WintersGarrett WintersGarrett WintersGarrett WintersGarrett WintersGarrett WintersGarrett WintersGarrett WintersGarrett WintersGarrett WintersGarrett WintersGarrett WintersGarrett WintersGarrett WintersGarrett WintersGarrett WintersGarrett WintersGarrett WintersGarrett WintersGarrett WintersGarrett WintersGarrett WintersGarrett WintersGarrett WintersGarrett WintersGarrett WintersGarrett WintersGarrett WintersGarrett WintersGarrett WintersGarrett WintersGarrett WintersGarrett WintersGarrett WintersGarrett Winterstersrita Serrano</td>
            <td>Software Engineer</td>
            <td>San Francisco</td>
            <td>56</td>
            <td>2012/06/01</td>
            <td>$115,000</td>
        </tr>

    </tbody>
</table>

我发现有人建议在td中添加div然后添加max-height，但是我的jquery数据表使用ajax属性来加载数据，所以我无法控制tbody部分的内容表格看起来像在HTML中。

任何帮助？

谢谢！杰森

Answer 1

max-height不适用于所有类型的元素，它适用于

...所有元素，但未替换的内联元素，表列和列组

引自MDN。 <td>默认情况下显示类型为table-cell，因此max-height不起作用。如果您尝试更改<td>的显示类型，那么您将渲染数据表，那么您将获得一些非常奇怪的表格布局。但是，您可以使用<span>

将所有内容包装到columnDefs中

$('#example').dataTable({
    columnDefs : [
       {   
          targets : [0,1,2,3,4,5],
          render : function(data, type) {
              if (type == 'display') {
                 return '<span class="td-container">'+data+'</span>';
              } else {
                  return data;
              }     
          }
       }
   ]      
});

以上只会呈现<td>的视觉布局。您仍然可以搜索/过滤内容，因为内容未隐藏或包含在<span>中。现在，您可以为.td-container定义所需的CSS：

span.td-container {
  height: 34px !important;
  overflow-y : hidden;  
  display: inline-block;  
}

34px只是一个建议，它似乎适合两行。

分叉小提琴 - ＆gt;的 http://jsfiddle.net/19d5nkus/

Answer 2

*This is pretty late, but someone could benefit out of this, i extended the ellipsis, to show tooltip:*     


$('#example').dataTable({
columnDefs : [
   {   
      targets : [0,1,2,3,4,5],
      render : function(data, type) {
          return type === 'display' && data.length > 6) ?
            '<span title= \"' + data +'\">' + data.substr(0,6) + '...</span>' : data; 
      }
   }
]
});

Answer 3

我不知道这是否有用但请查看。

http://jsfiddle.net/x4kvmdcm/

我使用jquery在td周围添加div并设置overflow-y属性。我已将其设置为hidden但您可以使用scroll，以便您可以在td内滚动以查看内容。您可以放置代码以在ajax完成/成功事件中添加div，以便在执行代码时获得tbody。

希望这有帮助。

jquery数据表工具提示

3 个答案: