Child Datatable cascade from parent table based on passed ID parameter

darren

How can we make the second crew table "cascade" so that when a control is pressed in the parent team table the ID parameter for the team from the parent team table is passed to the child team and then this child team loads from a data request as at present but where the ID of the team used is the ID of the requesting parent.

I see that this will require two things,
1. how do we include the column with the control to load the child in the parent.
2. how do we load the child data and clear the current contents from the passed ID.

current initialisation code is, we currently hardcode the id parameter to the json call which works fine for that static id 4770 but it needs to be dynamically generated and passed as teamID from the parent table:

$('#crewTable').dataTable( {
"sDom": "<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'span6'i><'span6'p>>",
"sPaginationType": "bootstrap",
"sLengthMenu": "_MENU_ records per page",
"bProcessing": true,
"sAjaxSource": '/Arc/TeamListArray/4770/'
});

allan

> 1. how do we include the column with the control to load the child in the parent.

It sounds like you might want to use sDefaultContent here? Perhaps something like:

[code]
{
aoColumnDefs: [
{
sDefaultContent: 'Show details',
aTargets: [ -1 ]
}
]
}
[/code]

That will make the content of the last column in your table a link with the text `Show detail` - obviously this can be changed for an icon or anything else.

Then you'd attach an event handler to that link:

[code]
$('#example tbody).on('click', 'a.details', function (e) {
e.preventDefault();

var rowData = table.fnGetData( $(this).parents('tr')[0] ); // where `table` is the DataTable instance
... Ajax request to get extra information, and show in the details area, or some other display method
} );
[/code]

So that hooks onto the `a` tag we added, and will perform some action to actually show the extra information you want. That would perhaps involve a clear of the HTML and then repopulating it with the new information. How exactly that operates will depend heavily uptown how you want to display the data and where the data actually is (i.e. get it by Ajax or something else).

Regards,
Allan

johncscott

That helped me get there. Thank you very much.

In the end I got to:
[code]
"aoColumnDefs": [ {
"fnRender": function ( o, val ) {
return ''+o.aData[0]+''; },
"aTargets": [ "tid" ] } ]
[/code]

and then to reload my child table a function

[code]
function doCasc(tid) {
$.getJSON(dataurl+tid, function(teamList) {
var aaData = teamList["aaData"];
$('#crewTable').dataTable().fnClearTable();
$('#crewTable').dataTable().fnAddData(aaData);
});
};
[/code]

johncscott

Trying to use Complex Header
to get a column grouping
but I am using aoColumns to initialise the columns
like this:
[code]
$.getJSON("/base/Arc/MealListCols/4765/Y/", function(cols){
colsExpected = cols.length;
$('#dynamic').html('');
$('#import').dataTable({
"sDom": "<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'span6'i><'span6'p>>",
"sPaginationType": "bootstrap",
"aoColumns": cols
} );
});
[/code]

where the cols definition comes from the json request

I would like to group the days together in the style of "complex headers"
Is it possible to initialise this like this with aoColumns ?

allan

Absolutely - complex headers can be used with aoColumns. The key thing to remember with complex headers is that there _must_ be a unique cell for each column - i.e. each column must have its own cell which uniquely addresses just that column - so sorting and filtering can be applied to it.

For example this is a valid layout:

[code]
+---+---+---+---+
| | |
+---+---+---+---+
| | | | |
+---+---+---+---+
[/code]

while this is not (since the last two are both colspanning).

[code]
+---+---+---+---+
| | | |
+---+---+---+---+
| | | |
+---+---+---+---+
[/code]

The aoColumns you use will target the unique cell for each column.

Allan

johncscott

perfect :)

one final question though
is it possible to initialise this using the aoColums: cols as above (where cols comes from the json) including this setting up the colspanned parent headers?

allan

Oh I see - you want to get the column's Javascript object from Ajax? Yes it is possible, but it isn't a built in option in DataTables because JSON cannot represent functions and functions can be used in aoColumns. If you are happy not using functions then you can use $.getJSON or similar to make the Ajax call and then just feed the result into the DataTables initialisation option as aoColumns or aoColumnDefs .

Allan