how to truncate a field data in datatable and add towards the end to view the entire field data?

Question

I am using datatable to display a report in my application. Some of the columns have huge data which I want to truncate the view and add a clickable option towards the end so that a user can click it to view the entire content of a call.

I have tried using ellipsis render to transform the data using substring but it is not a feasible solution as I have download option as well in my table. If i use renderer the downloaded report also shows the truncated format.

Please suggest how can i achieve this as the table has download functionalities too? https://jsfiddle.net/jwrmgbnc/3/

Below is the sample code for the same:

$(document).ready(function() {
 $("#TableName").Datatable( {
    language: { "search": "Filter"},
    paging: false,
    info: true,
    scrollY:'50px',
    scrollCollapse: true,
    scrollX: false,
    
   });
});

andrewJames · Accepted Answer

I think my original answer has some significant limitations. Here is another approach, which:

applies to every cell in a basic table (not just one column)
allows you to repeatedly expand and collapse each cell
does not rely on hidden columns

var truncatedLength = 38; // set this to whatever you prefer

var table;
var origDataMap = new Map(); // the original (full) data for long text

$(document).ready(function() {

  table = $('#TableName').DataTable({
    columnDefs: [{
      targets: ['_all'],
      render: function(data, type, row, meta) {
        // sets up initially minimized text for content longer than truncatedLength:
        var api = new $.fn.dataTable.Api(meta.settings);
        var node = api.cell(meta.row, meta.col, {
          order: 'index'
        }).node();
        var hasToggler = $(node).children().length > 0;

        if (type === 'display' && !hasToggler && data.length > truncatedLength + 5) {
          origDataMap.set(meta.row + '-' + meta.col, data);
          var displayData = '<span>' + data.substr(0, truncatedLength) + '... </span>' +
            '<button class="moreless-button" data-state="trunc"' +
            ' onclick="showMoreOrLess(this, ' + meta.row + ', ' + meta.col + ')">more</button>';
          return displayData;
        } else {
          return data;
        }
      }
    }]
  });

});

//
// toggles the DOM table cell's contents (but it
// does not change the underlying DataTables data):
//
function showMoreOrLess(node, rowId, colId) {
  var displayData;
  var state = $(node).attr('data-state');
  var origData = origDataMap.get(rowId + '-' + colId);
  var cellNode = $(node).parent();
  if (state === 'trunc') {
    displayData = '<span>' + origData + ' </span>' +
      '<button class="moreless-button" data-state="full"' +
      ' onclick="showMoreOrLess(this, ' + rowId + ', ' + colId + ')">less</button>';
  } else {
    displayData = '<span>' + origData.substr(0, truncatedLength) + '... </span>' +
      '<button class="moreless-button" data-state="trunc"' +
      ' onclick="showMoreOrLess(this, ' + rowId + ', ' + colId + ')">more</button>';
  }
  cellNode.html(displayData);
}

/* makes a button look like a link */

.moreless-button {
  background: none!important;
  border: none;
  padding: 0!important;
  font-family: arial, sans-serif;
  color: #069;
  text-decoration: underline;
  cursor: pointer;
}

<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Demo</title>

  <script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script type="text/javascript" src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.23/css/jquery.dataTables.min.css" />

  <link rel="stylesheet" type="text/css" href="https://datatables.net/media/css/site-examples.css">

  <script type="text/javascript" src="https://cdn.datatables.net/plug-ins/1.10.24/dataRender/ellipsis.js"></script>

  <style>
    /* makes a button look like a link */
    
    .moreless-button {
      background: none!important;
      border: none;
      padding: 0!important;
      font-family: arial, sans-serif;
      color: #069;
      text-decoration: underline;
      cursor: pointer;
    }
  </style>

</head>

<body>

  <div style="margin: 20px;">

    <table id="TableName" class="display dataTable cell-border" style="width:100%">
      <thead>
        <tr>
          <th>Number</th>
          <th>Severity</th>
          <th>Description</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Number123</td>
          <td>S1</td>
          <td>Description size keeps on varying</td>
        </tr>
        <tr>
          <td>Number345</td>
          <td>S9 major alarm severe major alarm severe major alarm severe</td>
          <td>Unable to log on</td>
        </tr>
        <tr>
          <td>Number234</td>
          <td>S1</td>
          <td>Flashing red lights in the corner of my eyes</td>
        </tr>
        <tr>
          <td>Number765</td>
          <td>S3</td>
          <td>Description again is very very very long very very very long very very very long</td>
        </tr>
        <tr>
          <td>Number678</td>
          <td>S1</td>
          <td>Description size keeps on varying</td>
        </tr>
        <tr>
          <td>Number543</td>
          <td>S3</td>
          <td>Lorem ipsum dolor sit amet, consectetur "adipiscing" elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
            irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</td>
        </tr>
      </tbody>
    </table>

  </div>


</body>

</html>

how to truncate a field data in datatable and add <more options> towards the end to view the entire field data?

Tags:

javascript

html

jquery

datatables

WW_

1 Answers

andrewJames

Recent Activity

Donate For Us