DataTables如何切割字符串并添加(.)并将完整的字符串放入工具提示中。

Question

我使用精细的DataTables作为我的网站。

在几行中，字符串可能非常长(例如，500到1000个字符)。

如何在20个标牌处剪掉，加上“.”然后把它放进工具提示里？

(当然，我知道子字符串，也知道如何添加工具提示，我只想知道在可数据上是否有一个特性/选项，或者在哪个事件上我可以获取数据并剪切它并向单元格添加工具提示)

Answer 1

我不知道纯粹的DataTables解决方案，但这可以通过设置固定的列宽度(通过CSS或DataTables选项)与表格单元格上的text-overflow: ellipsis相结合来实现。

要使text-overflow工作，还需要指定固定宽度，设置overflow: hidden和white-space: nowrap

.limited{
    white-space: nowrap;
    width: 100%;                   
    overflow: hidden;
    text-overflow: ellipsis;
}

要查看完整的单元格内容，请将其添加到单元格的title属性中：

<td class='limited' 
  title='Very long cell content which is to long for the cell but shown as a tooltip'>
  Very long cell content which is to long for the cell but shown as a tooltip
</td>

看上去像这样：

​

​

有关更多细节，请参见MDN文章 on text-overflow。

另一种选择是使用DataTables 正交数据特性。与仅使用substring限制单元格内容不同，这将允许您保持完整的单元格内容可搜索：

<td data-search='Very long cell content which is to long for the cell but shown as a tooltip' 
   title='Very long cell content which is to long for the cell but shown as a tooltip'>
   Very long cell content...
</td>

输出将与上面的输出相同。

Answer 2

我知道这个问题已经回答了，但是我想添加这个datatable 插件作为解决这个问题的一个选项。对于它是如何工作的，以及如何在这个博客帖子中使用它，有一个非常好的解释。

使用起来非常简单，假设您需要剪切文本，并且只显示20个字符，您可以这样使用：

$("#yourTableSelector").dataTable({
    ... // other configurations
    columnDefs: [{
        targets: 0, // the target for this configuration, 0 it's the first column
        render: $.fn.dataTable.render.ellipsis(20)
    }]

});

为了澄清一下，这个插件需要DataTables 1.10+。