DataTables如何剪切字符串并添加（...）并将完整字符串放在工具提示中

Question

我在网站上使用了精美的DataTable。

在几行中可能会发生字符串非常长（例如500到1000个字符）。

如何在20个标志处剪切，添加“...”并将其放在工具提示中？

（当然我知道子串并且知道如何添加工具提示，我只是想知道我是否在数据表上有一个功能/选项，或者我可以在哪个事件上获取数据并将其剪切并添加工具提示细胞）

Answer 1

我知道这个问题已经回答了，但我想补充一点  数据表plugin作为这个问题的一个选项。有一个非常好的解释，它如何工作以及如何在blog post中使用它。

使用起来非常简单，假设您需要剪切文本并且只显示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 +

Answer 2

我不知道纯 DataTables解决方案，但这可以通过设置固定列宽（通过CSS或DataTables选项）和{{1}来实现在你的桌子上。

要使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 article。

---

另一种选择是使用DataTables orthogonal data功能。与仅使用text-overflow限制单元格内容相比，这将允许您保持可搜索的完整单元格内容：

substring

输出与上面相同。