how to show a dynamic content in datatables extendable childrows

johnny83

hi everyone.

I start using datatables. In my table every row has an Id.

<tr class="editable odd" id="form-153501" role="row">
I also have expand rows which I can call via ajax and display on click

$('.expandable').click(function(){ var id = $(this).attr('rel'); selector = id +" .data"; $(id).show(); var url = $(this).attr('data-url'); var content = $.get( url , function(data){ $(selector).html(data); }) });

Unfortunately my childrows are not working in datatables they are being treated as normal row they always opening on the very top above the rows.

I found this https://datatables.net/examples/api/row_details.html link where explains how to implement childrows.

    function format ( d ) {
    // `d` is the original data object for the row
    return '<div class="slider">'+
        'content'+
    '</div>';
}

     // Add event listener for opening and closing details
    $('#table tbody').on('click', 'td.details-control', function () {
        var tr = $(this).closest('tr');
        var row = table.row( tr );

        if ( row.child.isShown() ) {
            // This row is already open - close it
            $('div.slider', row.child()).slideUp( function () {
                row.child.hide();
                tr.removeClass('shown');
            } );
        }
        else {
            // Open this row
            row.child( format(row.data()), 'no-padding' ).show();
            tr.addClass('shown');

            $('div.slider', row.child()).slideDown();
        }
    } );
 } );

My problem is that my childrows are dynamic. $(selector).html(data) is returning the following format according the id

<table class="table  table-bordered" >
            <tbody> 
                    <tr>
                        <td width='30%' class='label-view text-right'>Guest Phone</td>
                        <td> </td>
                    </tr>
                    <tr>
                        <td width='30%' class='label-view text-right'>Guest E-Mail</td>
                        <td> </td>

                    </tr>

I couldn't put my js code in the function format ( d ). Basicly need to replace $(selector).html(data); with the variable content <div class="slider">'+'content'+'</div>';

This is what I have done so far:

`$('.expandable').click(function format( d ){
var id = $(this).attr('rel');
selector = id +" .data";
if($(selector).is(':empty'))
{
var off = $(id).show();
var url = $(this).attr('data-url');
msg = $.ajax({type: "GET", url, async: false}).responseText;
}
return msg;
});

I would appreciate if you can point me to the right direction. I can show static content but cannot show the dynamic content.