Create DataTables in hidden child rows on table load

atilafm

I found several articles and questions on the forum, demonstrating how to implement a DataTables with details in the child as in
https://datatables.net/examples/api/row_details.html
https://datatables.net/blog/2017-03-31
https://datatables.net/forums/discussion/42045/nested-tables#latest

also examples of how to create DataTables within the child.

However, all the examples I found are based on loading the child's data by clicking on a button that show the child (details).
I would like to load all the children along with loading the main table, but keeping the childrens hidden.

Using createdRow I can insert a regular table (HTML) but I cannot insert DataTables, since the child is not visible (does not exist in the DOM).

Would there be any alternative for me to be able to create datatables in the children of each line, without displaying them? And how do I submit these children's inputs even though they are hidden?

kthorngren

I would like to load all the children along with loading the main table, but keeping the childrens hidden.

How are you planning to load the data for the child Datatables?

The https://datatables.net/examples/api/row_details.html example uses data from the parent row for the child. You could fetch all the child row data as part of the parent row.

If you don't want to fetch each child Datatable, using Ajax, when the child is opened you cen fetch all the data before initializing Datatables and store in a Javascript variable. When opening the child row get the data from this variable.

If this doesn't help then please provide more details of how you plan to provide the data to the child Datatable.

Kevin

atilafm

Hi Kevin, Thanks for the answer

Yes, I load the data for the childs togheter with main table, all childs are part of the parent row - they are an array inside each object

Actually, I try load all childs in rowCreated like:

```
createdRow: function (row, data, index) {
var id = 'subtable_' + index;

        table.row(row).child(formatSubTable(id, data)); // Create  <table> structure
        populateSubTable(id, data.orders); //  Transform table in datatable and populate

```

but it doesn't work, because the table is not acessible, unless I use child.show();

I think the solution would be to do as you commented, create datatables only when the child is opened

I created an example of how I implemented below:

http://live.datatables.net/vunequyi/9/

My question now is how to submit the input checkboxes present in the child lines, even if hidden .. I believe that I will need to store them as variables or something.

kthorngren

Looks like you should use initComplete and loop through the rows using rows().every(), for example:
http://live.datatables.net/dovemosa/1/edit

My question now is how to submit the input checkboxes present in the child lines, even if hidden

The row().child() API has a className parameter that will apply a class to the child td. Use this to create a delegated event handler. See the bottom of the example.

Kevin

atilafm

Thanks again Kevin,

moving load of childs from createdRow to initComplete works, I just add child.hide() after populate subtable to initiate childs closed:

this.child(formatSubTable(id, data), 'child-detail').show();
populateSubTable(id, data.pedidos);
this.child.hide();

Great idea use className to help to refer inputs in child rows. I think with this I can "store" checkeds inputs to submit, or else, i can use in submit this aproach of loop all rows forcing show yours childs to read inputs values...