Child Row with Parent Row with Matching Columns

geebeetoo

I need to load row details as a form of drill down. The child row has exactly the same columns. These columns are created dynamically as each table a customer creates may have any number of columns.

I am running into all kinds of issues as I am new to this DataTables plug-in which by the way is the best thing I've ever had the pleasure to work with.

How can I have a child row that would align with the columns in the parent row?

I also tried in vain to dynamically modify the width of the child row's first TD to match the width of the parent first TD. The child row may have a longer content which can affect the layout.

Hope you can help.

kthorngren

Its hard to find but Allan shows how to align the columns in this thread. For example:
http://live.datatables.net/gupazase/1/edit

Kevin

geebeetoo

Thank you for that. It almost works with that solution.

I use an ajax call to get the data from server side. My problem is I don't know how to return the response from ajax to the format() function with just the many <tr> nodes.

I can return the response but it ignores the $(msg).toArray();

I am using the example :
CODE:
function format ( rowData ) {
var div = $('

')
.addClass( 'loading' )
.text( 'Loading...' );

$.ajax( {
    url: '/myAjaxCall',
    success: function ( msg ) {
        div
            .html( msg )
            .removeClass( 'loading' );
    }
} );

return $(div).toArray();

}
END CODE

but this does not eliminate the colspan that mucks things up.

I tested returning this:
newRows = "<tr><td class='expand-row'></td><td class='theSubjectTD' style='min-width:150px'>TESTING THIS ROW 22222</td><td>0:07:34</td><td>0</td><td>0:00:00</td><td>0:00:04</td><td>4</td><td>0</td><td>0</td><td>0</td><td>450</td><td>0</td><td>(0.00 %)</td><td>(0.00 %)</td><td>0:00:00</td><td>0:00:00</td><td>0</td><td>(0.00 %)</td><td>0:00:00</td></tr><tr><tr><td class='expand-row'></td><td class='theSubjectTD' style='min-width:150px'>TESTING THIS ROW 33333</td><td>0:07:34</td><td>0</td><td>0:00:00</td><td>0:00:04</td><td>4</td><td>0</td><td>0</td><td>0</td><td>450</td><td>0</td><td>(0.00 %)</td><td>(0.00 %)</td><td>0:00:00</td><td>0:00:00</td><td>0</td><td>(0.00 %)</td><td>0:00:00</td></tr><tr>";
return $(newRows).toArray();

And that works. But I can't figure how to use the 'msg' from ajax callback and return properly given the example code from your site.

geebeetoo

In the example above under newRows variable, I copied the string of <tr> nodes wrong here. it should have been

newRows = "<tr><td class='expand-row'></td><td class='theSubjectTD' style='min-width:150px'>TESTING THIS ROW 22222</td><td>0:07:34</td><td>0</td><td>0:00:00</td><td>0:00:04</td><td>4</td><td>0</td><td>0</td><td>0</td><td>450</td><td>0</td><td>(0.00 %)</td><td>(0.00 %)</td><td>0:00:00</td><td>0:00:00</td><td>0</td><td>(0.00 %)</td><td>0:00:00</td></tr><tr><td class='expand-row'></td><td class='theSubjectTD' style='min-width:150px'>TESTING THIS ROW 33333</td><td>0:07:34</td><td>0</td><td>0:00:00</td><td>0:00:04</td><td>4</td><td>0</td><td>0</td><td>0</td><td>450</td><td>0</td><td>(0.00 %)</td><td>(0.00 %)</td><td>0:00:00</td><td>0:00:00</td><td>0</td><td>(0.00 %)</td><td>0:00:00</td></tr>";

This latter is what I tested and it works perfect.

I just need to figure how to send the ajax results to the format() function properly.

geebeetoo

PS This is probably important for you to know.
When the page loads the data for main table comes directly from a server side php call, not an ajax call.

The ajax call is only used when we need details of given row.

geebeetoo

EUREKA!

I got it to work.

I had to bring my ajax call in the click details-control function.

Thanks for your help.