I want to add child row dynamically after each parent row in DataTable.

RachnaRachna

I want to add child row dynamically after each parent row.It will not be on any button click .My requirement is add one parent row and then if there is childs then add child rows after parent. I am using server side pagination in my DataTable.
Is it possible? please help. Below is the structure of my DataTable.

<tr class=parentrow> <td>somedata1</td> <td>somedata2</td> </tr>
<tr class=childrow><td>childdata1</td> <td>childdata2</td></tr>
<tr class=childrow><td>childdata3</td> <td>childdata4</td></tr>
<tr class=childrow><td>childdata5</td> <td>childdata6</td></tr>
<tr class=parentrow> <td>somedata3</td> <td>somedata4</td> </tr>
<tr class=childrow><td>childdata1</td> <td>childdata2</td></tr>
<tr class=childrow><td>childdata3</td> <td>childdata4</td></tr>
<tr class=childrow><td>childdata5</td> <td>childdata6</td></tr>

RachnaRachna

and I forgot to mention , My array structure will be like
0:
{ParentName: "President"
Children: (3) [{…}, {…}, {…}]
Somedata1: "Contested"
Somedata2: 3
SomeData3: 1}
1:
{ParentName: "Secretary"
Children: (3) [{…}, {…}, {…}]
Somedata1: "Election"
Somedata2: 22
SomeData3: 2}

kthorngren

Start with this Child Detail Rows example. This example uses the draw event to open the child rows with server side processing:
http://live.datatables.net/qolevune/186/edit

Kevin

RachnaRachna

thanks Kevin for your quick reply. In this above child row draw example . They are adding only one child row per parent. Is it possible to add foreach loop there because i have multiple child rows per parent. child rows are not fixed number. sometimes its 10 sometimes its 100 child rows.

kthorngren

The format function is where the HTML is built to display the child rows. You can create any Javascript code needed to loop through the data to build the HTML needed to display one or more rows.

Kevin

RachnaRachna

thanks Kevin, After using $.each loop , It's working for me .