datatable in child row of datatable with two data sources
datatable in child row of datatable with two data sources
I have datatable with child rows where I want to show data from my source which part of is shown in master datatable but also want to include another datatable with different data source.
I have working part where on click I expand the row of master datatable, take id and with ajax I get json with data to child datatable, but it is not showing in that table
here is my format function, which I take from child row example and add another table for my child datatable
function format ( d ) {
// `d` is the original data object for the row
return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+
'<tr>'+
'<td>Sídlo:</td>'+
'<td>'+d.sidlo+'</td>'+
'</tr>'+
'<tr>'+
'<td>IČO_DIČ:</td>'+
'<td>'+d.ico_dic+'</td>'+
'</tr>'+
'<tr>'+
'<td>Poznámka:</td>'+
'<td>'+d.poznamka+'</td>'+
'</tr>'+
'<tr>'+
'<td>Dátum vloženia:</td>'+
'<td>'+d.entry_timestamp+'</td>'+
'</tr>'+
'</table>'+
'<table class="table table-striped table-bordered table-hover" id="dataTables-contact-details"><thead><tr><th>Meno</th><th>Priezvisko</th><th>Email</th><th>Tel</th><th>Poznámka</th>'+
'<th>Dátum vloženia</th></tr></thead><tbody></tbody></table>';
and here is my master datatable and code how I get both data sources
$(document).ready(function() {
var $subjektID;
var table2 = $('#dataTables-subjekt-childrow').DataTable( {
'dom': 'C<"clear">lfrtip',
'bDestroy':true,
'bStateSave': true,
'aaSorting': [[0, 'asc']],
'bProcessing': true,
'bServerSide': false,
'sAjaxSource': '../list_subjekt2.php',
'bJQueryUI': true,
'bAutoWidth': false,
'bFilter':true,
'bLengthChange': true,
'bPaginate': true,
'bSort': true,
'iDisplayLength': 10,
'bInfo': true,
'sPaginationType': 'full_numbers',
'language': {"url": "../json/datatables_slovak.json"},
'aoColumns': [
{
"className": 'details-control',
"orderable": false,
"data": null,
"defaultContent": ''
},
{ "data": "nazov" },
{ "data": "okres" },
{ "data": "kraj" },
{ "data": "typ" }
],
'order': [[1, 'asc']]
} );
var subtable = $('#dataTables-contact-details').DataTable({
'bProcessing': true,
'bServerSide': false,
'aoColumns': [
{ "data": "meno" },
{ "data": "priezvisko" },
{ "data": "email" },
{ "data": "tel_cislo" },
{ "data": "poznamka" },
{ "data": "entry_timestamp" }
],
'rowCallback': function (row, data) {},
'filter': false,
'info': false,
'ordering': false,
'language': {"url": "../json/datatables_slovak.json"},
'retrieve': true
});
$('#dataTables-subjekt-childrow tbody').on('click', 'td.details-control', function () {
var tr = $(this).closest('tr');
var row = table2.row( tr );
if ( row.child.isShown() ) {
// This row is already open - close it
row.child.hide();
tr.removeClass('shown');
}
else {
// Open this row
$subjektID = row.data().idSubjekt;
$.ajax({
url: "../list_contacts_detail.php",
type: "post",
datatype : 'json',
data: {idsubjektu : $subjektID}
}).done(function (result) {
subtable.clear().draw();
subtable.rows.add(result).draw();
}).fail(function (jqXHR, textStatus, errorThrown) {
// needs to implement if it fails
});
row.child( format(row.data()) ).show();
tr.addClass('shown');
}
} );
I thought that rowCallback should fill the child table, but I am kinda lost as I dont get any error, in firebug I see that ajax part is ok and shows me in console correct json data source for child datatable
can you pls help me what did I wrong, why it is not rendering my child datatable?
Answers
nobody has tried datatable in another datatable pls? any clue how to format this result will be great