How to create datatable child rows on backend

nabeeltahir

**$row[0] = <td>$name</td>;
$row[1] = <td>$lname</td;
$data[] = $row;
$table = array(
"draw" => $draw,
"recordsTotal" => $total,
"recordsFiltered" => $total,
"data" => $data
);

    echo json_encode($table);

**:
Debugger code (debug.datatables.net):
Error messages shown:
**I'm facing the issue, making data table on the backend. Now I don't want to change my structure for child rows. Any help would be appreciated. **:

kthorngren

Are you wanting to ajax load the child rows as shown in this blog?

If this doesn't help then please provide more details of what you want to do.

Kevin

nabeeltahir

How to create child rows for first name and last name?

nabeeltahir

Yes, exactly I want to load child rows through AJAX.. Because I am creating rows in the backend.
My Ajax response is like that...

{draw: "1", recordsTotal: 4230, recordsFiltered: 4230,…}
data: [["<tr id="125"><td><input type="checkbox" class="checkbox1" value=125 id="checked_125"></td>",…],…]
0: ["<tr id="125"><td><input type="checkbox" class="checkbox1" value=125 id="checked_125"></td>",…]
1: ["<tr id="126"><td><input type="checkbox" class="checkbox1" value=126 id="checked_126"></td>",…]
2: ["<tr id="127"><td><input type="checkbox" class="checkbox1" value=127 id="checked_127"></td>",…]
3: ["<tr id="128"><td><input type="checkbox" class="checkbox1" value=128 id="checked_128"></td>",…]
4: ["<tr id="136"><td><input type="checkbox" class="checkbox1" value=136 id="checked_136"></td>",…]
5: ["<tr id="3303"><td><input type="checkbox" class="checkbox1" value=3303 id="checked_3303"></td>",…]
6: ["<tr id="124"><td><input type="checkbox" class="checkbox1" value=124 id="checked_124"></td>",…]
7: ["<tr id="3705"><td><input type="checkbox" class="checkbox1" value=3705 id="checked_3705"></td>",…]
8: ["<tr id="81"><td><input type="checkbox" class="checkbox1" value=81 id="checked_81"></td>",…]
9: ["<tr id="3383"><td><input type="checkbox" class="checkbox1" value=3383 id="checked_3383"></td>",…]
draw: "1"
recordsFiltered: 20
recordsTotal: 20

nabeeltahir

My data isn't coming in this format. How could I figure this out without changing backend?

kthorngren

In the success function of the ajax just parse your response data into an HTML structure you want, like a table or ul or whatever you like. The child row format is up to you.

Kevin

nabeeltahir

Brother, you didn't get my point. Datatable Child rows need column attribute in which you have mentioned column name. But my response is totally different. my response is in a tabular format, not JSON.

Here is the code of datatable child rows..You clearly see the columns attribute.
$(document).ready(function() {
var table = $('#example').DataTable( {
"ajax": "../ajax/data/objects.txt",
"columns": [
{
"className": 'details-control',
"orderable": false,
"data": null,
"defaultContent": ''
},
{ "data": "name" },
{ "data": "position" },
{ "data": "office" },
{ "data": "salary" }
],
"order": [[1, 'asc']]
} );

but my AJAX response is in this format.

nabeeltahir

I want to create child rows in the controller. Here Just I click on plus icon the table will be populated underneath the row. The main issue is my Ajax response is different from the response of the child rows. The entire table was generated from the server.....

kthorngren

The entire table was generated from the server.....

Ok. You can still use it. Not sure what your data structure is but maybe this example, using your data snippet, will get you started.
http://live.datatables.net/kaxelive/1/edit

Kevin

nabeeltahir

Brother, I really appreciated your efforts..
But my concern is that your ajax response is like this

data: [{name: "Tiger Nixon", position: "System Architect", salary: "$320,800", start_date: "2011/04/25",…},…]
0: {name: "Tiger Nixon", position: "System Architect", salary: "$320,800", start_date: "2011/04/25",…}
extn: "5421"
name: "Tiger Nixon"
office: "Edinburgh"
position: "System Architect"
salary: "$320,800"
start_date: "2011/04/25"
1: {name: "Garrett Winters", position: "Accountant", salary: "$170,750", start_date: "2011/07/25",…}
2: {name: "Ashton Cox", position: "Junior Technical Author", salary: "$86,000", start_date: "2009/01/12",…}
3: {name: "Cedric Kelly", position: "Senior Javascript Developer", salary: "$433,060",…}
4: {name: "Airi Satou", position: "Accountant", salary: "$162,700", start_date: "2008/11/28",…}
5: {name: "Brielle Williamson", position: "Integration Specialist", salary: "$372,000",…}
6: {name: "Herrod Chandler", position: "Sales Assistant", salary: "$137,500", start_date: "2012/08/06",…}
7: {name: "Rhona Davidson", position: "Integration Specialist", salary: "$327,900",…}
8: {name: "Colleen Hurst", position: "Javascript Developer", salary: "$205,500", start_date: "2009/09/15",…}
]

But my ajax response is like that...

draw: "1", recordsTotal: 4230, recordsFiltered: 4230,…}
data: [["<tr id="125"><td><input type="checkbox" class="checkbox1" value=125 id="checked_125"></td>",…],…]
0: ["<tr id="125"><td><input type="checkbox" class="checkbox1" value=125 id="checked_125"></td>",…]
0: "<tr><td class="parent"><input type="checkbox" class="checkbox1" value=125 id="checked_125"></td>"
1: "<td class="parent">First Name</td>"
3: "<td class="parent">Last Name</td>"
4: "<td class="child">Age</td>"
5: "<td class="child">Active</td></tr>"
1: ["<tr id="126"><td><input type="checkbox" class="checkbox1" value=126 id="checked_126"></td>",…]
2: ["<tr id="127"><td><input type="checkbox" class="checkbox1" value=127 id="checked_127"></td>",…]
3: ["<tr id="128"><td><input type="checkbox" class="checkbox1" value=128 id="checked_128"></td>",…]
4: ["<tr id="136"><td><input type="checkbox" class="checkbox1" value=136 id="checked_136"></td>",…]
5: ["<tr id="3303"><td><input type="checkbox" class="checkbox1" value=3303 id="checked_3303"></td>",…]
6: ["<tr id="124"><td><input type="checkbox" class="checkbox1" value=124 id="checked_124"></td>",…]
7: ["<tr id="3705"><td><input type="checkbox" class="checkbox1" value=3705 id="checked_3705"></td>",…]
8: ["<tr id="81"><td><input type="checkbox" class="checkbox1" value=81 id="checked_81"></td>",…]
9: ["<tr id="3383"><td><input type="checkbox" class="checkbox1" value=3383 id="checked_3383"></td>",…]
draw: "1"
recordsFiltered: 4230
recordsTotal: 4230

**I just want the TD with the class child to come in the child rows and the TD with the parent to come in the parent rows.

I hope now you understand my point. If you have any confustion.. please reply.. will answer you..
Now I get stuck on this...**

nabeeltahir

Brother I really appreciated your efforts..
But my concern is that your ajax response is like this

data: [{name: "Tiger Nixon", position: "System Architect", salary: "$320,800", start_date: "2011/04/25",…},…]
0: {name: "Tiger Nixon", position: "System Architect", salary: "$320,800", start_date: "2011/04/25",…}
extn: "5421"
name: "Tiger Nixon"
office: "Edinburgh"
position: "System Architect"
salary: "$320,800"
start_date: "2011/04/25"
1: {name: "Garrett Winters", position: "Accountant", salary: "$170,750", start_date: "2011/07/25",…}
2: {name: "Ashton Cox", position: "Junior Technical Author", salary: "$86,000", start_date: "2009/01/12",…}
3: {name: "Cedric Kelly", position: "Senior Javascript Developer", salary: "$433,060",…}
4: {name: "Airi Satou", position: "Accountant", salary: "$162,700", start_date: "2008/11/28",…}
5: {name: "Brielle Williamson", position: "Integration Specialist", salary: "$372,000",…}
6: {name: "Herrod Chandler", position: "Sales Assistant", salary: "$137,500", start_date: "2012/08/06",…}
7: {name: "Rhona Davidson", position: "Integration Specialist", salary: "$327,900",…}
8: {name: "Colleen Hurst", position: "Javascript Developer", salary: "$205,500", start_date: "2009/09/15",…}
]

But my ajax response is like that...

draw: "1", recordsTotal: 4230, recordsFiltered: 4230,…}
data: [["<tr id="125"><td><input type="checkbox" class="checkbox1" value=125 id="checked_125"></td>",…],…]
0: ["<tr id="125"><td><input type="checkbox" class="checkbox1" value=125 id="checked_125"></td>",…]
0: "<tr><td class="parent"><input type="checkbox" class="checkbox1" value=125 id="checked_125"></td>"
1: "<td class="parent">First Name</td>"
3: "<td class="parent">Last Name</td>"
4: "<td class="child">Age</td>"
5: "<td class="child">Active</td></tr>"
1: ["<tr id="126"><td><input type="checkbox" class="checkbox1" value=126 id="checked_126"></td>",…]
2: ["<tr id="127"><td><input type="checkbox" class="checkbox1" value=127 id="checked_127"></td>",…]
3: ["<tr id="128"><td><input type="checkbox" class="checkbox1" value=128 id="checked_128"></td>",…]
4: ["<tr id="136"><td><input type="checkbox" class="checkbox1" value=136 id="checked_136"></td>",…]
5: ["<tr id="3303"><td><input type="checkbox" class="checkbox1" value=3303 id="checked_3303"></td>",…]
6: ["<tr id="124"><td><input type="checkbox" class="checkbox1" value=124 id="checked_124"></td>",…]
7: ["<tr id="3705"><td><input type="checkbox" class="checkbox1" value=3705 id="checked_3705"></td>",…]
8: ["<tr id="81"><td><input type="checkbox" class="checkbox1" value=81 id="checked_81"></td>",…]
9: ["<tr id="3383"><td><input type="checkbox" class="checkbox1" value=3383 id="checked_3383"></td>",…]
draw: "1"
recordsFiltered: 4230
recordsTotal: 4230

**I just want the TD with the class child to come in the child rows and the TD with the parent to come in the parent rows.

I hope now you understand my point.. If you have any confustion.. please reply.. will answer you..
Now I get sutck on this...**

nabeeltahir

From backend, I get a JSON response containing the tables with class parent and child and I want to child class td underneath the table rows..

nabeeltahir

Here is my ajax response in the clear format......
This is the incoming data from ajax request...

data: [["<tr id="125"><td><input type="checkbox" class="checkbox1" value=125 id="checked_125"></td>",…],…]
0: ["<tr id="125"><td><input type="checkbox" class="checkbox1" value=125 id="checked_125"></td>",…]
0: "<tr id="125"><td class="parent"><input type="checkbox" class="checkbox1" value=125 id="checked_125"></td>"
1: "<td class="parent">First Name</td>"
3: "<td class="parent">Last Name</td>"
4: "<td class="child">Age</td>"
5: "<td class="child">Active</td></tr>"

allan

In Kevin's example he uses:

    div
      .html( html )
      .removeClass( 'loading' );

to write the HTML returned from the server (mocked in the example) into the child container.

If that HTML happened to contain a table, you'd then be able to run $(...).DataTable() on it, which it sounds like it is what you want to do (a DataTable inside a child row of a DataTable)?

If that isn't working for you, please link to a test case showing where you are at with it.

Allan

nabeeltahir

http://live.datatables.net/buzetocu/1/
Here is my code..
Don't know how to add ajax file in live datatable but I've created variable data.. my incoming JSON response is like that.. I want to create child row of td with class child...

kthorngren

I updated my test case with your data. As I mentioned you just need to iterate the data structure you have to build the HTML. Like this:
http://live.datatables.net/kaxelive/3/edit

Kevin

nabeeltahir

Brother, you don't understand my question... TD element who have class parent show without click... TD element who have class child show on click plus icon...

nabeeltahir

Please remove your JSON data inside /ajax/objects.txt file and replaced my JSON data...

nabeeltahir

I need like this...

kthorngren

So, you don't want a separate Ajax request as shown in the blog I linked to?

If the data is part of the row data from the Datatables ajax request then all you need to do is follow this example:
https://datatables.net/examples/api/row_details.html

Kevin

nabeeltahir

Exactly, you are right.. But the incoming JSON response is different.. How can I use this response format for row_details?

Row Details JSON response is like this

{
"data": [
{
"id": "1",
"name": "Tiger Nixon",
"position": "System Architect",
"salary": "$320,800",
"start_date": "2011/04/25",
"office": "Edinburgh",
"extn": "5421"
},
]
}

BUT my JSON response is like this

{
"data": [
{
"0": "<tr><td class='parent'><input type='checkbox'></td>",
"1": "<td class='parent'>First Name</td>",
"2": "<td class='parent'>Last Name</td>",
"3": "<td class='child'>Salary</td>",
"4": "<td class='child'>Age</td></tr>",
},
{
"0": "<tr><td class='parent'><input type='checkbox'></td>",
"1": "<td class='parent'>First Name</td>",
"2": "<td class='parent'>Last Name</td>",
"3": "<td class='child'>Salary</td>",
"4": "<td class='child'>Age</td></tr>",
},
{
"0": "<tr><td class='parent'><input type='checkbox'></td>",
"1": "<td class='parent'>First Name</td>",
"2": "<td class='parent'>Last Name</td>",
"3": "<td class='child'>Salary</td>",
"4": "<td class='child'>Age</td></tr>",
},
{
"0": "<tr><td class='parent'><input type='checkbox'></td>",
"1": "<td class='parent'>First Name</td>",
"2": "<td class='parent'>Last Name</td>",
"3": "<td class='child'>Salary</td>",
"4": "<td class='child'>Age</td></tr>",
},
]};

kthorngren

You can define columns.data like this:

columns: [
  { data: '0' },
  { data: '1' },
  { data: '2' }
],

Your objects are numbers instead os words like name.

In the format function access the the child data as d.3 or d['3'] andd.4ord['4']`.

Kevin

nabeeltahir

Thank you so much Brother