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>
