How Can I Truncate HTML Table Cells using DataTable?-CodePudding

I have an HTML table where some of the cells have very long text, I'm therefore trying to truncate them to a limited number of characters and add an ellipsis if they exceed it. To make the table more interactive I'm using 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>

I also tried the ellipsis plugin made by datatables but this also didn't work. Following the alternatives in these ([1][2][3]) questions was also unsuccessful.

Any help would be much appreicated.

CodePudding user response：

I had failed to set the truncate class in the td elements. This is now working here.

Thanks to mplungjan for the help spotting this!

CodePudding user response：

Looking at the ellipsis plugin, that seems a lot of code for such a simple task. I achieved a similar result with this:

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