Make child rows by class name declaration NOT ajax data source

dreadedmanraz

I am trying to get a complex jquery datatable working to have multiple child rows per parent - not from ajax - but from a class declaration on the table which are dynamically generate rows on page load. I don't want them to be collapsible - just becoming ignored in the sorting, and remain attached to their parent row.

Here is the full example with jsfiddle:

http://stackoverflow.com/questions/36396742/jquery-datatables-make-child-rows-by-class-name-declaration-not-ajax-data-sour

Thanks for your assistance.

allan

Hi,

Your JSFiddle doesn't appear to run giving a Javascript error about jQuery noting being defined (doesn't look like it is loaded).

I don't immediately see the issue from the code. Could you link to a running test that shows the issue please.

Allan

dreadedmanraz

Sorry, it's working now.
I did get it running but it didn't save for some reason.

allan

Thanks!

You have a colspan in the tbody (<td colspan="22">). That is not supported in DataTables at this time I'm afraid. The tech note the error message links to does note this.

Allan

dreadedmanraz

This example from the documentation has the child rows with columns that have colspans: https://datatables.net/extensions/responsive/examples/child-rows/whole-row-control.html

Anyway, I've changed it to remove colspans as per:
https://jsfiddle.net/3nv7c332/4/

It is no longer throwing an error, but it won't set the child rows correctly.
It sorts them to the top of the table for some reason.
Is there a way to do have child rows decoratively?

allan

Yes, child rows are an exception since they aren't primary rows in the table. The main rows in the table cannot have colspan or rowspan.

If you need child rows you need to use the row().child() method.

Allan

dreadedmanraz

I am using it, but it's not working:
$('table#sort1 tr.parentrow').each(function() {
var row = table.row(this);
childrows = $(this).closest('tr').nextUntil('.parentrow');
if (childrows.length > 0) {
row.child(childrows).show();
}
});

allan

Sorry - I missed that part of the code. It looks like you have the "child" row actually as parent rows (i.e. they are embedded into the HTML as rows in the host DataTable.

Rows in DataTables are 100% independent of each other, so there is no way to say "this rows is the child of this" when initialising from a DOM source.

What you would need to do is have the information you want to be shown in the child row embedded into the parent row (perhaps in a hidden column for example) and use it from there.

Allan

dreadedmanraz

Okay, thanks.
It would be nice to be able to declaratively declare child rows...as there are some child rows with many columns.

dreadedmanraz

Can you please provide an example of having the child row in a hidden column? I've searched but can't seem to find it.

allan

Happy to - this would be covered by the support options.

Allan

dreadedmanraz

As in, is there an example in the documentation?

allan

If you were to modify this example to add columns.visible to one or more of the columns to make them hidden, then that would be a hidden column which child row example.

Allan

dreadedmanraz

I can't use it that way unfortunately as I have one, none or multiple child rows per parent row. If I initialise each child in an extra hidden column the table will break immediately due to the uneven number of extra hidden columns.
Is there any other way I can achieve the result?

allan

You would need to preprocess the table before the DataTables initialisation. I.e. You would need to loop over the table and create an object structure that effectively contains the parent / children relationships between rows, then remove the child rows. Finally when child rows should be displayed show them again.

I realise this a bit of a pain. Child rows are much easier when using a JSON data source!

Allan

dreadedmanraz

I've got this working now with single child rows. Is there a way to shorten this syntax?
row.child(row.data()[row.data().length - 1]).show();

and
row.child(row.data()[Object.keys(this.data()).length -1]).show();

I want it to show the last column as the child.

allan

Not really. You could save row.data() into a variable, but that's about it.

There was a discussion about providing an Array.prototype.last() method in ES Discuss a while back, but that appears to have not got any traction.

Allan