jQuery dataTables - expand / collapse loading ajax data?

I'm using the jquery datatables plugin and I wanted to have a collapse and expand feature as:

http://datatables.net/examples/api/row_details.html

the data i am loding in is coming via html how should i structure the html table content so that it collapses / expands?

Thanks

UPDATE

Thanks for getting back to me, they have a pretty bog standard table which is fine, but they have this function in the js:

/* Formating function for row details */
function fnFormatDetails ( oTable, nTr )
        {
        var aData = oTable.fnGetData( nTr );
            var sOut = '<table cellpadding="5" cellspacing="0" border="0" styl开发者_StackOverflow社区e="padding-left:50px;">';
            sOut += '<tr><td>Rendering engine:</td><td>'+aData[1]+' '+aData[4]+'</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;
        }

I'm not sure how this is changing the table structure but this is being added which allows the collpased content in the table.

I want to just generate one html table with out using the script above.

**jQuery Datatable** have inbuilt features for expand and collapse row.
use the js fiddle for example : 

http://jsfiddle.net/dvgotLfz/5/