The question is published on by Tutorial Guruji team.
I’m trying to display extra info on child rows without using ajax, the thing is that it works well but I want to display more than one value in a list way.
Something like this
Any suggestions?
I’m using web2py to take the data and fill the table, this is my try:
<script>
var tabla;
$(document).ready(function(){
tabla= $('#tablaGenerica').DataTable( {
} );
function format(value) {
return '<div>Hidden Value: ' + value + '</div>';
}
$('#tablaGenerica').on('click', 'td.details-control', function () {
var tr = $(this).closest('tr');
var row = tabla.row(tr);
if (row.child.isShown()) {
// This row is already open - close it
row.child.hide();
tr.removeClass('shown');
} else {
// Open this row
row.child(format(tr.data('child-value'))).show();
tr.addClass('shown');
}
});
</script>
<table id="tablaGenerica" class="tablaC table-striped hover cell-border" cellspacing="0" width="100%" >
<thead>
<tr>
<th></th>
<th class="select-filter">Name</th>
<th class="select-filter">Age</th>
<th class="select-filter">Country</th>
<th class="select-filter">Level</th>
</tr>
</thead>
<tbody>
{{for person in formList:}}
<tr data-child-value="{{=person.Person.salary}}">
<td class="details-control"></td>
<td>{{=person.Person.name}}</td>
<td>{{=person.Person.age}}</td>
<td>{{=person.Person.country}}</td>
<td>{{=person.Person.level}}</td>
</tr>
{{pass}}
</tbody>
</table>
Answer
I’d suggest to refactor your app slightly, as you don’t really need to cook up your HTML server-side, DataTables can handle that for you on the client end.
You may simply prepare the array of objects, where each entry corresponds to the table row and each object property / inner array element – to respective column (or details entry):
[
{id: 1, name: 'Clark Kent', age: 32, country: 'USA', level: 'high'},
{id: 2, name: 'Arthur Curry', age: 31, country: 'USA', level: 'medium'},
{id: 3, name: 'Barry Allen', age: 24, country: 'USA', level: 'low'}
]
In order to link those object properties / inner array items to your table columns, you may use DataTables option columns or columnDefs :
$('#tablaGenerica').DataTable({
...
columns: [
{title: 'ID', data: 'id'},
{title: 'Name', data: 'name'},
...
]
});
After that (and this is the essential part of the answer), in order to show multiple details within your child row, you simply need to modify your format() function, so that it returns HTML markup of the child row with all the necessary details:
const format = data => `
<div>Age: ${data.age}</div>
<div>Country: ${data.country}</div>
<div>Level: ${data.level}</div>
`;
So, complete DEMO of your case might look something, like that:
//specify source data
const dataSrc = [
{id: 1, name: 'Clark Kent', age: 32, country: 'USA', level: 'high'},
{id: 2, name: 'Arthur Curry', age: 31, country: 'USA', level: 'medium'},
{id: 3, name: 'Barry Allen', age: 24, country: 'USA', level: 'low'}
];
//initialize DataTables
const dataTable = $('#tablaGenerica').DataTable({
//specify necessary options to adjust DataTable to your needs
dom: 't',
data: dataSrc,
//specify columns that should be visible initially
columns: [
{title: 'ID', data: 'id'},
{title: 'Name', data: 'name'}
]
});
//declare function that renders child row with hidden details
const format = data => `
<div>Age: ${data.age}</div>
<div>Country: ${data.country}</div>
<div>Level: ${data.level}</div>
`;
//attach event listener to row click
$('#tablaGenerica').on('click', 'tr', function(){
//get clicked row into a variable
const clickedRow = dataTable.row($(this));
//show/hide child row
clickedRow.child.isShown() ? clickedRow.child.hide() : clickedRow.child(format(clickedRow.data())).show();
//toggle 'shown' class
$(this).toggleClass('shown');
});#tablaGenerica tbody tr.even:hover, #tablaGenerica tbody tr.odd:hover{
cursor: pointer;
background: lightgray;
}<!doctype html> <html> <head> <script type="application/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script type="application/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script> <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css"> </head> <body> <table id="tablaGenerica"></table> </body> </html>