DataTables - Child rows
HTML
<link rel="stylesheet" href="https://cdn.datatables.net/r/dt/dt-1.10.9/datatables.min.css">
<script src="https://cdn.datatables.net/r/dt/dt-1.10.9/datatables.min.js"></script>
<table id="dataTeam" class="table table-hover display responsive">
<thead>
<tr class="bg-default">
<th></th>
<th>Grupo</th>
<th>Empresa</th>
<th>Responsável</th>
<th>Situação</th>
<th>Extras</th>
</tr>
</thead>
<tfoot>
<tr>
<th></th>
<th>Grupo</th>
<th>Empresa</th>
<th>Responsável</th>
<th>Situação</th>
<th>Extras</th>
</tr>
</tfoot>
</table>
CSS
td.details-control {
background: url('https://raw.githubusercontent.com/DataTables/DataTables/1.10.7/examples/resources/details_open.png') no-repeat center center;
cursor: pointer;
}
tr.shown td.details-control {
background: url('https://raw.githubusercontent.com/DataTables/DataTables/1.10.7/examples/resources/details_close.png') no-repeat center center;
}
JavaScript
$(document).ready(function() {
function format (obj) {
var html = '';
html += '<div class="slider">';
html += ' <table class="table tableChild table-hover display responsive">';
html += ' <thead>';
html += ' <tr class="bg-child-default">';
html += ' <th>Coachee</th>';
html += ' <th>Expira em</th>';
html += ' <th>Concluído em</th>';
html += ' <th>Status</th>';
html += ' <th>Data de Cadastro</th>';
html += ' </tr>';
html += ' </thead>';
html += ' <tbody>';
$.each(obj.extra, function(i, _obj){
html += ' <tr>';
html += ' <td>'+_obj.coachee+'</td>';
html += ' <td>'+_obj.expiraem+'</td>';
html += ' <td>'+_obj.concluidoem+'</td>';
html += ' <td>'+_obj.statusatv+'</td>';
html += ' <td>'+_obj.datacadastro+'</td>';
html += ' </tr>';
});
html += ' </tbody>';
html += ' </table>';
html += '</div>';
return html;
}
$(document).ready(function() {
var table = $('#dataTeam').DataTable( {
"ajax": 'https://api.myjson.com/bins/190ul5',
"columns": [
{
"class": 'details-control',
"orderable": false,
"data": null,
"defaultContent": ''
},
{ "data": "grupo" },
{ "data": "empresa" },
{ "data": "responsavel" },
{ "data": "status" },
{ "data": "extra", "visible": false }
],
"order": [[1, 'asc']]
} );
// Add event listener for opening and closing details
$('#dataTeam...