How to set child rows
How to set child rows
I am trying to add several rows as child rows below a specific row. I am using the index to find the parent row. But I am only able to add the rows to the last position of the table but not as child rows of a specific row. Would be happy for some help. Thanks!
// my data
let tableData= {
data: [
{
data1: 1,
data2: 2,
data3: 3,
data4: 4
},
{
data1: 1.1,
data2: 2.1,
data3: 3.1,
data4: 4.1
},
etc....
],
columns: [
{ title: 'row_1', data: 'data1'},
{ title: 'row_2', data: 'data2' },
{ title: 'row_3', data: 'data3' },
{ title: 'row_4', data: 'data4' }
]
}
// filling the table
$('#testTable').DataTable(tableData);
Clicking on any row, the row data is sent to the server including the index of the row
// my response Data -> new child rows:
let responseData = [
{
data1: child1,
data2: child1,
data3: child1,
data4: child1
},
{
data1: child2,
data2: child2,
data3: child2,
data4: child2
},
etc....
];
Setting the rows of the response data to the end of the table works:
let table= $('#testTable').DataTable();
table.rows.add(responseData).draw();
BUT HOW IS IT POSSIBLE TO SET CHILD ROWS VIA AN INDEX:
Something like:
let table= $('#testTable').DataTable();
let row = table.row( indexRow );
row.child(rows.add(responseData)).show();
Answers
The child row details aren't a Datatables row. This example shows the use of a function called format to display the child row details. You can change the format function to display the child how you like. Using
rows.add()
won't work.Maybe the Ajax loaded row details blog or the Child row editing blog will give you some ideas.
If you still need help then please build a simple test case showing an example of what you have with details of what you are trying to achieve. This will allow us to give more specific suggestions.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case
Kevin