Server side json with exandable rows

dezeaz

Hi,

I've managed so far to pull data from MYSQL, and return JSON data and display it in a table. Ive been trying to also add the expandable rows feature by attempting to use the examples from the site.

I'm struggling to understand how to return additional data as 'hidden' if you like, that will be displayed when the row is expanded. The data i've returned using mData. I've tried using this for the items that will be on view when the row is expanded but it causes an error as the column does not exist?

If someone could please point me in the right direction, thanks.

Javascript

$(document).ready( function() {
  var oTable = $('#example1').dataTable( {
    "sAjaxSource": "ajax.php",
    "sAjaxDataProp": "",
    "aoColumns": [
            { "mData": null, "sClass": "details-control", "sDefaultContent": "" },
            { "mData": "id" },
            { "mData": "ProjectRef" },
            { "mData": "DateTimeGenerated" },
            { "mData": "Download" }
            ]
            });
});

Html

   <table id="example1" class="table table-striped table-bordered table-hover" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th></th>
                <th>ID</th>
                <th>Project Reference</th>
                <th>Date Created</th>
                <th>Download</th>
            </tr>
        </thead>
        <tfoot>
           <tr>
               <th></th>
                 <th>ID</th>
                <th>Project Reference</th>
                <th>Date Created</th>
                <th>Download</th>
            </tr>
        </tfoot>
    </table>

This is my attempt to add the expandable rows with an example from this site, but stuck knowing how to return additional items in the json string to appear in the expandable rows:

var oTable;
 
/* Formating function for row details */
function fnFormatDetails ( nTr )
{
    var aData = oTable.fnGetData( nTr );
    var sOut = '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">';
    sOut += '<tr><td>Rendering engine:</td><td>'+aData[2]+' '+aData[5]+'</td></tr>';
    sOut += '<tr><td>Link to source:</td><td>Could provide a link here</td></tr>';
    sOut += '<tr><td>Extra info:</td><td>And any further details here (images etc)</td></tr>';
    sOut += '</table>';
     
    return sOut;
}





function format ( d ) {
    return 'Full name: <br>'+
        'Salary: <br>'+
        'The child row can contain any data you wish, including links, images, inner tables etc.';
}



$(document).ready( function() {
  var oTable = $('#example1').dataTable( {
    "sAjaxSource": "ajax.php",
    "sAjaxDataProp": "",
    "aoColumns": [
            { "mData": null, "sClass": "details-control", "sDefaultContent": "" },
            { "mData": "id" },
            { "mData": "ProjectRef" },
            { "mData": "DateTimeGenerated" },
            { "mData": "Download" }
            ]
            });





    // Array to track the ids of the details displayed rows
    var detailRows = [];
 
    $('#example1 tbody').on( 'click', 'tr td.details-control', function () {
        var tr = $(this).closest('tr');
        var row = dt.row( tr );
        var idx = $.inArray( tr.attr('id'), detailRows );
 
        if ( row.child.isShown() ) {
            tr.removeClass( 'details' );
            row.child.hide();
 
            // Remove from the 'open' array
            detailRows.splice( idx, 1 );
        }
        else {
            tr.addClass( 'details' );
            row.child( format( row.data() ) ).show();
 
            // Add to the 'open' array
            if ( idx === -1 ) {
                detailRows.push( tr.attr('id') );
            }
        }
    } );
 
    // On each draw, loop over the `detailRows` array and show any child rows
    dt.on( 'draw', function () {
        $.each( detailRows, function ( i, id ) {
            $('#'+id+' td.details-control').trigger( 'click' );
        } );
    } );
} );

Thank you