datatable in child row of datatable with two data sources

datatable in child row of datatable with two data sources

bejbe01bejbe01 Posts: 10Questions: 4Answers: 0
edited June 2015 in Free community support

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

  • bejbe01bejbe01 Posts: 10Questions: 4Answers: 0

    nobody has tried datatable in another datatable pls? any clue how to format this result will be great

This discussion has been closed.