如何使用 DataTable 截断 HTML Table 单元格？

Question

我有一个 HTML table，其中一些单元格的文本很长，因此我试图将它们截断为有限数量的字符，如果超过则添加一个省略号.为了使 table 更具交互性，我使用 datatables, so I tried to follow this datatables specific solution which uses their rendering features however it doesn't truncate values in my table. The example table where this isn't working can be found in 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 made by datatables but this also didn't work. Following the alternatives in these ([3])题也是不成功

如有任何帮助，我们将不胜感激。

Answer 1

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

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

Answer 2

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

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

如何使用 DataTable 截断 HTML Table 单元格？

How Can I Truncate HTML Table Cells using DataTable?

jquery

datatables