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

Posted 2023-05-09

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

【英文标题】：DataTables how to cut string and add (...) and put the full string in tooltip

【发布时间】：2014-09-05 08:09:40

【问题描述】：

我为我的网站使用了精美的数据表。

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

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

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

【问题讨论】：

这里有一些来自数据表论坛的旧解决方案，不知道它是否仍然这样工作：Thread 1, Thread 2

【参考方案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+

【讨论】：

嗨...感谢您的解决方案。有什么方法可以让工具提示中的整个文本都可以选择而不影响当前功能？

【参考方案2】：

我不知道 纯 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>

可能看起来像这样：

有关详细信息，请参阅text-overflow 上的MDN article。

---

另一种选择是使用 DataTables orthogonal data 功能。与仅使用 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>

输出与上面的相同。