如何使用 DataTable 截断 HTML 表格单元格？答案

【问题标题】：How Can I Truncate HTML Table Cells using DataTable?如何使用 DataTable 截断 HTML 表格单元格？
【发布时间】：2022-01-11 15:08:54
【问题描述】：

我有一个 HTML 表格，其中一些单元格的文本很长，因此我试图将它们截断为有限数量的字符，如果超过它，则添加一个省略号。为了使表格更具交互性，我使用了datatables，所以我尝试关注this datatables specific solution，它使用了他们的渲染功能，但它不会截断我表格中的值。可以在this JS Fiddle 中找到不适用的示例表。

function strtrunc(str, max, add) {
  add = add || '...';
  return (typeof str === 'string' && str.length > max ? str.substring(0, max) + add : str);
};

$(document).ready(function() {
  $('#example').DataTable({
    "scrollX": true,
    targets: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16],
    render: function(data, type, full, meta) {
      if (type === 'display') {
        data = strtrunc(data, 10);
      }
      return data;
    }
  });
});

.truncate {
  max-width: 50px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/plug-ins/1.11.3/dataRender/ellipsis.js"></script>

<link rel="stylesheet" href="https://cdn.datatables.net/1.11.3/css/jquery.dataTables.min.css">

<table border="1" class="dataframe" id="example">
  <thead>
    <tr style="text-align: right;">
      <th>Dictionary ID</th>
      <th>GPPD ID</th>
      <th>ESAIL ID</th>
      <th>Common Name</th>
      <th>Settlement BMU ID</th>
      <th>National Grid BMU ID</th>
      <th>4C-Offshore ID</th>
      <th>WindPowerNet ID</th>
      <th>Wikidata ID</th>
      <th>Wikipedia ID</th>
      <th>Power-Technology ID</th>
      <th>EUTL ID</th>
      <th>EIC ID</th>
      <th>CfD ID</th>
      <th>JRC ID</th>
      <th>IAEA ID</th>
      <th>REPD ID (Old)</th>
      <th>REPD ID (New)</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><a href="https://osuked.github.io/Power-Station-Dictionary/objects/10000">10000</a></td>
      <td>-</td>
      <td>MARK</td>
      <td>Rothes Bio-Plant CHP</td>
      <td>E_MARK-1, E_MARK-2</td>
      <td>MARK-1, MARK-2</td>
      <td>-</td>
      <td>-</td>
      <td>-</td>
      <td>-</td>
      <td>-</td>
      <td>-</td>
      <td>48W000000MARK-1D</td>
      <td>-</td>
      <td>-</td>
      <td>-</td>
      <td>-</td>
      <td>-</td>
    </tr>
    <tr>
      <td><a href="https://osuked.github.io/Power-Station-Dictionary/objects/10001">10001</a></td>
      <td>GBR1000377, GBR1000369</td>
      <td>DIDC</td>
      <td>Didcot</td>
      <td>T_DIDC1, T_DIDC2, T_DIDC4, T_DIDC3, T_DIDC1G, T_DIDC2G, T_DIDC3G, T_DIDC4G, E_DIDC1G, E_DIDC2G, E_DIDC3G, E_DIDC4G, T_DIDCB5, T_DIDCB6</td>
      <td>DIDC1, DIDC2, DIDC4, DIDC3, DIDC1G, DIDC2G, DIDC3G, DIDC4G, DIDC01G, DIDC02G, DIDC03G, DIDC04G, DIDCB5, DIDCB6</td>
      <td>-</td>
      <td>-</td>
      <td>-</td>
      <td>-</td>
      <td>-</td>
      <td>97165</td>
      <td>48W00000DIDC01G1, 48W00000DIDC02GZ, 48W00000DIDC03GW, 48W00000DIDC04GT, 48W000000DIDCB5C, 48W000000DIDCB6A</td>
      <td>-</td>
      <td>-</td>
      <td>-</td>
      <td>-</td>
      <td>-</td>
    </tr>
    <tr>
      <td><a href="https://osuked.github.io/Power-Station-Dictionary/objects/10002">10002</a></td>
      <td>GBR1000374, GBR1000375</td>
      <td>ABTH</td>
      <td>Aberthaw B</td>
      <td>T_ABTH7, T_ABTH8, T_ABTH9, T_ABTH7G, T_ABTH8G, T_ABTH9G</td>
      <td>ABTH7, ABTH8, ABTH9, ABTH7G, ABTH8G, ABTH9G</td>
      <td>-</td>
      <td>-</td>
      <td>-</td>
      <td>-</td>
      <td>-</td>
      <td>97175</td>
      <td>48W0000000ABTH7Y, 48W0000000ABTH8W, 48W0000000ABTH9U, 48W000000ABTH7G2, 48W100000ABTH8GN, 48W000000ABTH9GX</td>
      <td>-</td>
      <td>-</td>
      <td>-</td>
      <td>-</td>
      <td>-</td>
    </tr>
    <tr>
      <td><a href="https://osuked.github.io/Power-Station-Dictionary/objects/10003">10003</a></td>
      <td>GBR1000142</td>
      <td>COTPS</td>
      <td>Cottam</td>
      <td>T_COTPS-1, T_COTPS-2, T_COTPS-3, T_COTPS-4</td>
      <td>COTPS-1, COTPS-2, COTPS-3, COTPS-4</td>
      <td>-</td>
      <td>-</td>
      <td>-</td>
      <td>-</td>
      <td>-</td>
      <td>97778</td>
      <td>48W00000COTPS-1Q, 48W00000COTPS-2O, 48W00000COTPS-3M, 48W00000COTPS-4K</td>
      <td>-</td>
      <td>-</td>
      <td>-</td>
      <td>-</td>
      <td>-</td>
    </tr>
    <tr>
      <td><a href="https://osuked.github.io/Power-Station-Dictionary/objects/10004">10004</a></td>
      <td>GBR0000174, GBR1000112</td>
      <td>DRAXX</td>
      <td>Drax</td>
      <td>T_DRAXX-1, T_DRAXX-2, T_DRAXX-3, T_DRAXX-4, T_DRAXX-5, T_DRAXX-6, T_DRAXX-10G, T_DRAXX-12G, T_DRAXX-9G</td>
      <td>DRAXX-1, DRAXX-2, DRAXX-3, DRAXX-4, DRAXX-5, DRAXX-6, DRAXX-10G, DRAXX-12G, DRAXX-9G</td>
      <td>-</td>
      <td>-</td>
      <td>-</td>
      <td>-</td>
      <td>-</td>
      <td>96842</td>
      <td>48W00000DRAXX-56, 48W00000DRAXX-64, 48W000DRAXX-10G9, 48W000DRAXX-12G3, 48W0000DRAXX-9GR</td>
      <td>INV-DRX-001</td>
      <td>-</td>
      <td>-</td>
      <td>-</td>
      <td>-</td>
    </tr>
  </tbody>
</table>

我也尝试了由数据表制作的ellipsis plugin，但这也没有用。遵循这些 ([1][2][3]) 问题中的替代方案也未成功。

任何帮助将不胜感激。

【问题讨论】：

你实际在哪里使用 truncate 类？
如果我这样做对我有用<td class="truncate">T_DIDC1, T_DIDC2, T_DIDC4, T_DIDC3, T_DIDC1G, T_DIDC2G, T_DIDC3G, T_DIDC4G, E_DIDC1G, E_DIDC2G, E_DIDC3G, E_DIDC4G, T_DIDCB5, T_DIDCB6</td>
啊，这很有道理，谢谢你们。我现在已经设法让它工作了
我们都说不客气 ;) ?随意删除问题
哈哈，我没有意识到你已经发布了两个回复。谢谢，会的。

标签： jquery datatables

【解决方案1】：

我未能在td 元素中设置truncate 类。这现在正在运行here。

感谢mplungjan 帮助发现这个问题！

【讨论】：

【解决方案2】：

看看省略号插件，对于这样一个简单的任务，似乎有很多代码。我得到了类似的结果：

columns: [
    {
        data: 'description',
        render: data => {
            if(data.length > 350) {
                return `<span title="${data}">${data.substr(0, 350)}...</span>`;
            }
            return data;
        }
    },
]

【讨论】：