I'm using datatables jquery library to show some results from a Database.
var table = jQuery('#table').DataTable({
language: {
searchPlaceholder: "Search Results",
} ,
"lengthMenu": [[5, 10, 25, 50, 100, -1], [5, 10, 25, 50, 100, "All"]] ,
"autoWidth": true,
"responsive": true,
"lengthChange": true,
"ordering": true ,
});
But some data has long text, So the table exceeds the browser width.
I tried the following CSS:
#table td{
word-break: break-all
}
But the length of the text increased and the height of the table too, Also one of the columns contain a URL which that property not working with.
So I need to use something like a readmore button.
Does datatables has that option? Or I should create that?
I'm using datatables jquery library to show some results from a Database.
var table = jQuery('#table').DataTable({
language: {
searchPlaceholder: "Search Results",
} ,
"lengthMenu": [[5, 10, 25, 50, 100, -1], [5, 10, 25, 50, 100, "All"]] ,
"autoWidth": true,
"responsive": true,
"lengthChange": true,
"ordering": true ,
});
But some data has long text, So the table exceeds the browser width.
I tried the following CSS:
#table td{
word-break: break-all
}
But the length of the text increased and the height of the table too, Also one of the columns contain a URL which that property not working with.
So I need to use something like a readmore button.
Does datatables has that option? Or I should create that?
Share Improve this question asked Jul 8, 2018 at 15:31 user10040839user10040839 2- 1 Can you pls add a snippet or jsfiddle – Devansh J Commented Jul 8, 2018 at 15:59
- Here you are jsfiddle/smjbvk6a/15 , You need to use this library cdn.datatables/1.10.19/js/jquery.dataTables.min.js which acquired jQuery – user10040839 Commented Jul 9, 2018 at 7:40
2 Answers
Reset to default 7You can use createdCell callback to get the rendered cell and then you can do any DOM Manipulation that you want...
Here's an (not very semantic but working) example:
$(document).ready(function() {
var table = $('#table').DataTable({
language: {
searchPlaceholder: "Search Results",
},
"lengthMenu": [
[5, 10, 25, 50, 100, -1],
[5, 10, 25, 50, 100, "All"]
],
"autoWidth": true,
"responsive": true,
"lengthChange": true,
"ordering": true,
columnDefs: [{
targets: [1, 4],
createdCell: function(cell) {
var $cell = $(cell);
$(cell).contents().wrapAll("<div class='content'></div>");
var $content = $cell.find(".content");
$(cell).append($("<button>Read more</button>"));
$btn = $(cell).find("button");
$content.css({
"height": "50px",
"overflow": "hidden"
})
$cell.data("isLess", true);
$btn.click(function() {
var isLess = $cell.data("isLess");
$content.css("height", isLess ? "auto" : "50px")
$(this).text(isLess ? "Read less" : "Read more")
$cell.data("isLess", !isLess)
})
}
}]
});
//Moving Table Filtering Search Bar To A Table Header.
$('#tableSearch').html($('.dataTables_filter'));
//Moving Results Per Page DropDown Menu To A Table Header.
$('#tablePerPage').html($('#table_length'));
});<link href="https://cdn.datatables/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables/1.10.19/js/jquery.dataTables.min.js"></script>
<table id="table" class="display table table-hover table-responsive">
<thead>
<tr class="headContainer">
<th colspan="3">
<div id="tablePerPage"></div>
</th>
<th colspan="4">
<div id="tableSearch"></div>
</th>
</tr>
<tr class="secondHeader">
<th>#</th>
<th class="rowHeader">Title</th>
<th class="rowHeader">Image</th>
<th class="rowHeader">Website</th>
<th class="rowHeader">Description</th>
<th class="rowHeader">Date</th>
<th class="rowHeader">Actions</th>
</tr>
</thead>
<tbody id="tableContent">
<tr class="tableRow">
<td id="post_id">1</td>
<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</td>
<td>https://placehold.it/300/300</td>
<td> <a href="" target="_blank">http://website.</a> </td>
<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis possimus maiores, culpa sequi officiis nisi deserunt ratione voluptatem quasi, repellendus reiciendis obcaecati voluptatibus placeat qui quidem sint ex odit impedit!</td>
<td>09-07-2018</td>
<td>
<button id="editPost" class="tableAction editPost btn btn-success" data-toggle="modal" data-target="#editData" data-id="1">Edit <span class="glyphicon glyphicon-pencil"></span></button>
<button id="deletePost" data-id="1" class="tableAction deleteDist btn btn-danger">Delete <span class="glyphicon glyphicon-remove"></span></button>
</td>
</tr>
</tbody>
</table>Btw, There's also a ellipsis renderer plugin here but it doesn't have show/hide fuctionality
Based on @Devansh J's solution I made some improvements. The button is only visible, if a specific size of linebreakes are existing. Its not that precise as the cell-height, but were not able to find another solution. - hence on responsive tables the initial height is 0px (CSS flex). Live Demo.
$(document).ready( function () {
var table = $('#example').DataTable({
columnDefs: [
{
targets: "_all",
createdCell: function(cell, cellData, rowData, rowIndex, colIndex) {
//https://stackoverflow./a/51242920/14226613
//https://datatables/forums/discussion/58336/how-to-know-the-height-of-a-cell
var $cell = $(cell)
if (cellData != null) {
var linebreakes = cellData.split(/\r\n|\r|\n|br/).length
} else {
var linebreakes = ''
}
//some debug
/*console.log("###cell:")
console.log($cell)
console.log("###amount line breakes: " + linebreakes)*/
//jquery wrap a new class around the html structure
$(cell).contents().wrapAll("<div class='content'></div>");
//get the new class
var $content = $cell.find(".content");
//if there are more line as 12
if (linebreakes > 2) {
//change class and reduce height
$content.css({
"height": "20px",
"overflow": "hidden"
})
//add button only for this long cells
$(cell).append($("<button>⇊⇊</button>"));
}
//get IF of this new button
$btn = $(cell).find("button");
//store flag
$cell.data("isLess", true);
//eval click on button
$btn.click(function() {
//create local variable and assign prev. stored flag
var isLess = $cell.data("isLess");
//ternary check if this flag is set and manipulte/reverse button
$content.css("height", isLess ? "auto" : "20px")
$(this).text(isLess ? '\u21C8 \u21C8' : '\u21CA \u21CA')
//invert flag
$cell.data("isLess", !isLess)
})
}
}
]
});
})
CSS:
table.dataTable tbody th, table.dataTable tbody td button {
background-color: #77f772;
padding: 1px 3px 1px 3px;
margin: 0px;
line-height: 1.0;
vertical-align: middle;
text-align: center;
border: 0.5px solid #808080;
font-size: 90%;
outline: none;
}