'How can i add grandchild row to JS my table?
i am trying to add a grand child row to my table (a child row to my child row), but i couldnt figure out how to do that. when i press on the little arrow, how can i expand the row to a new expandable row? my json has 3 stages of data and i want each time i press a row another layer of data to get revealed here is a code example for 2 layers json code i found, i want to make it 3 layers:
var data = [
{
id: "1",
name: "Tiger Nixon",
position: "System Architect",
salary: "$320,800",
start_date: "2011/04/25",
office: "Edinburgh",
extn: "5421"
},
{
id: "2",
name: "Garrett Winters",
position: "Accountant",
salary: "$170,750",
start_date: "2011/07/25",
office: "Tokyo",
extn: "8422"
},
{
id: "3",
name: "Ashton Cox",
position: "Junior Technical Author",
salary: "$86,000",
start_date: "2009/01/12",
office: "San Francisco",
extn: "1562"
},
{
id: "4",
name: "Cedric Kelly",
position: "Senior Javascript Developer",
salary: "$433,060",
start_date: "2012/03/29",
office: "Edinburgh",
extn: "6224"
},
{
id: "5",
name: "Airi Satou",
position: "Accountant",
salary: "$162,700",
start_date: "2008/11/28",
office: "Tokyo",
extn: "5407"
},
{
id: "6",
name: "Brielle Williamson",
position: "Integration Specialist",
salary: "$372,000",
start_date: "2012/12/02",
office: "New York",
extn: "4804"
},
{
id: "7",
name: "Herrod Chandler",
position: "Sales Assistant",
salary: "$137,500",
start_date: "2012/08/06",
office: "San Francisco",
extn: "9608"
},
{
id: "8",
name: "Rhona Davidson",
position: "Integration Specialist",
salary: "$327,900",
start_date: "2010/10/14",
office: "Tokyo",
extn: "6200"
},
{
id: "9",
name: "Colleen Hurst",
position: "Javascript Developer",
salary: "$205,500",
start_date: "2009/09/15",
office: "San Francisco",
extn: "2360"
},
{
id: "10",
name: "Sonya Frost",
position: "Software Engineer",
salary: "$103,600",
start_date: "2008/12/13",
office: "Edinburgh",
extn: "1667"
},
{
id: "11",
name: "Jena Gaines",
position: "Office Manager",
salary: "$90,560",
start_date: "2008/12/19",
office: "London",
extn: "3814"
},
{
id: "12",
name: "Quinn Flynn",
position: "Support Lead",
salary: "$342,000",
start_date: "2013/03/03",
office: "Edinburgh",
extn: "9497"
},
{
id: "13",
name: "Charde Marshall",
position: "Regional Director",
salary: "$470,600",
start_date: "2008/10/16",
office: "San Francisco",
extn: "6741"
},
{
id: "14",
name: "Haley Kennedy",
position: "Senior Marketing Designer",
salary: "$313,500",
start_date: "2012/12/18",
office: "London",
extn: "3597"
},
{
id: "15",
name: "Tatyana Fitzpatrick",
position: "Regional Director",
salary: "$385,750",
start_date: "2010/03/17",
office: "London",
extn: "1965"
},
{
id: "16",
name: "Michael Silva",
position: "Marketing Designer",
salary: "$198,500",
start_date: "2012/11/27",
office: "London",
extn: "1581"
},
{
id: "17",
name: "Paul Byrd",
position: "Chief Financial Officer (CFO)",
salary: "$725,000",
start_date: "2010/06/09",
office: "New York",
extn: "3059"
},
{
id: "18",
name: "Gloria Little",
position: "Systems Administrator",
salary: "$237,500",
start_date: "2009/04/10",
office: "New York",
extn: "1721"
},
{
id: "19",
name: "Bradley Greer",
position: "Software Engineer",
salary: "$132,000",
start_date: "2012/10/13",
office: "London",
extn: "2558"
},
{
id: "20",
name: "Dai Rios",
position: "Personnel Lead",
salary: "$217,500",
start_date: "2012/09/26",
office: "Edinburgh",
extn: "2290"
},
{
id: "21",
name: "Jenette Caldwell",
position: "Development Lead",
salary: "$345,000",
start_date: "2011/09/03",
office: "New York",
extn: "1937"
},
{
id: "22",
name: "Yuri Berry",
position: "Chief Marketing Officer (CMO)",
salary: "$675,000",
start_date: "2009/06/25",
office: "New York",
extn: "6154"
},
{
id: "23",
name: "Caesar Vance",
position: "Pre-Sales Support",
salary: "$106,450",
start_date: "2011/12/12",
office: "New York",
extn: "8330"
},
{
id: "24",
name: "Doris Wilder",
position: "Sales Assistant",
salary: "$85,600",
start_date: "2010/09/20",
office: "Sidney",
extn: "3023"
},
{
id: "25",
name: "Angelica Ramos",
position: "Chief Executive Officer (CEO)",
salary: "$1,200,000",
start_date: "2009/10/09",
office: "London",
extn: "5797"
},
{
id: "26",
name: "Gavin Joyce",
position: "Developer",
salary: "$92,575",
start_date: "2010/12/22",
office: "Edinburgh",
extn: "8822"
},
{
id: "27",
name: "Jennifer Chang",
position: "Regional Director",
salary: "$357,650",
start_date: "2010/11/14",
office: "Singapore",
extn: "9239"
},
{
id: "28",
name: "Brenden Wagner",
position: "Software Engineer",
salary: "$206,850",
start_date: "2011/06/07",
office: "San Francisco",
extn: "1314"
},
{
id: "29",
name: "Fiona Green",
position: "Chief Operating Officer (COO)",
salary: "$850,000",
start_date: "2010/03/11",
office: "San Francisco",
extn: "2947"
},
{
id: "30",
name: "Shou Itou",
position: "Regional Marketing",
salary: "$163,000",
start_date: "2011/08/14",
office: "Tokyo",
extn: "8899"
},
{
id: "31",
name: "Michelle House",
position: "Integration Specialist",
salary: "$95,400",
start_date: "2011/06/02",
office: "Sidney",
extn: "2769"
},
{
id: "32",
name: "Suki Burks",
position: "Developer",
salary: "$114,500",
start_date: "2009/10/22",
office: "London",
extn: "6832"
},
{
id: "33",
name: "Prescott Bartlett",
position: "Technical Author",
salary: "$145,000",
start_date: "2011/05/07",
office: "London",
extn: "3606"
},
{
id: "34",
name: "Gavin Cortez",
position: "Team Leader",
salary: "$235,500",
start_date: "2008/10/26",
office: "San Francisco",
extn: "2860"
},
{
id: "35",
name: "Martena Mccray",
position: "Post-Sales support",
salary: "$324,050",
start_date: "2011/03/09",
office: "Edinburgh",
extn: "8240"
},
{
id: "36",
name: "Unity Butler",
position: "Marketing Designer",
salary: "$85,675",
start_date: "2009/12/09",
office: "San Francisco",
extn: "5384"
},
{
id: "37",
name: "Howard Hatfield",
position: "Office Manager",
salary: "$164,500",
start_date: "2008/12/16",
office: "San Francisco",
extn: "7031"
},
{
id: "38",
name: "Hope Fuentes",
position: "Secretary",
salary: "$109,850",
start_date: "2010/02/12",
office: "San Francisco",
extn: "6318"
},
{
id: "39",
name: "Vivian Harrell",
position: "Financial Controller",
salary: "$452,500",
start_date: "2009/02/14",
office: "San Francisco",
extn: "9422"
},
{
id: "40",
name: "Timothy Mooney",
position: "Office Manager",
salary: "$136,200",
start_date: "2008/12/11",
office: "London",
extn: "7580"
},
{
id: "41",
name: "Jackson Bradshaw",
position: "Director",
salary: "$645,750",
start_date: "2008/09/26",
office: "New York",
extn: "1042"
},
{
id: "42",
name: "Olivia Liang",
position: "Support Engineer",
salary: "$234,500",
start_date: "2011/02/03",
office: "Singapore",
extn: "2120"
},
{
id: "43",
name: "Bruno Nash",
position: "Software Engineer",
salary: "$163,500",
start_date: "2011/05/03",
office: "London",
extn: "6222"
},
{
id: "44",
name: "Sakura Yamamoto",
position: "Support Engineer",
salary: "$139,575",
start_date: "2009/08/19",
office: "Tokyo",
extn: "9383"
},
{
id: "45",
name: "Thor Walton",
position: "Developer",
salary: "$98,540",
start_date: "2013/08/11",
office: "New York",
extn: "8327"
},
{
id: "46",
name: "Finn Camacho",
position: "Support Engineer",
salary: "$87,500",
start_date: "2009/07/07",
office: "San Francisco",
extn: "2927"
},
{
id: "47",
name: "Serge Baldwin",
position: "Data Coordinator",
salary: "$138,575",
start_date: "2012/04/09",
office: "Singapore",
extn: "8352"
},
{
id: "48",
name: "Zenaida Frank",
position: "Software Engineer",
salary: "$125,250",
start_date: "2010/01/04",
office: "New York",
extn: "7439"
},
{
id: "49",
name: "Zorita Serrano",
position: "Software Engineer",
salary: "$115,000",
start_date: "2012/06/01",
office: "San Francisco",
extn: "4389"
},
{
id: "50",
name: "Jennifer Acosta",
position: "Junior Javascript Developer",
salary: "$75,650",
start_date: "2013/02/01",
office: "Edinburgh",
extn: "3431"
},
{
id: "51",
name: "Cara Stevens",
position: "Sales Assistant",
salary: "$145,600",
start_date: "2011/12/06",
office: "New York",
extn: "3990"
},
{
id: "52",
name: "Hermione Butler",
position: "Regional Director",
salary: "$356,250",
start_date: "2011/03/21",
office: "London",
extn: "1016"
},
{
id: "53",
name: "Lael Greer",
position: "Systems Administrator",
salary: "$103,500",
start_date: "2009/02/27",
office: "London",
extn: "6733"
},
{
id: "54",
name: "Jonas Alexander",
position: "Developer",
salary: "$86,500",
start_date: "2010/07/14",
office: "San Francisco",
extn: "8196"
},
{
id: "55",
name: "Shad Decker",
position: "Regional Director",
salary: "$183,000",
start_date: "2008/11/13",
office: "Edinburgh",
extn: "6373"
},
{
id: "56",
name: "Michael Bruce",
position: "Javascript Developer",
salary: "$183,000",
start_date: "2011/06/27",
office: "Singapore",
extn: "5384"
},
{
id: "57",
name: "Donna Snider",
position: "Customer Support",
salary: "$112,000",
start_date: "2011/01/25",
office: "New York",
extn: "4226"
}
];
function format(d) {
return (
'<table class="table mb-0">' +
'<tr class="table-primary">' +
"<td>Extension number:</td>" +
"<td>" +
d.extn +
"</td>" +
"</tr>" +
'<tr class="table-primary">' +
"<td>Extra info:</td>" +
"<td>And any further details here (images etc)...</td>" +
"</tr>" +
"</table>"
);
}
$(document).ready(function() {
var table = $("#employees").DataTable({
data: data,
columns: [
{
className: "details-control",
orderable: false,
data: null,
defaultContent: '<i class="material-icons">expand_more</i>'
},
{ data: "name" },
{ data: "position" },
{ data: "office" },
{ data: "salary" },
{ data: "extn", visible: false }
],
order: [[1, "asc"]]
});
$("#employees tbody").on("click", "td.details-control", function() {
var tr = $(this).closest("tr");
var row = table.row(tr);
if (row.child.isShown()) {
row.child.hide();
tr.removeClass("shown");
} else {
row.child(format(row.data()), "p-0").show();
tr.addClass("shown");
}
});
});td.details-control {
cursor: pointer;
}
tr.shown td.details-control i {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src = "https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src = "https://cdn.datatables.net/v/bs4/dt-1.10.18/datatables.min.js"></script>
<link rel = "stylesheet" type="text/css" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<link rel = "stylesheet" type="text/css" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel = "stylesheet" type="text/css" href = "https://cdn.datatables.net/v/bs4/dt-1.10.18/datatables.min.css">
</head>
<body>
<div id="container" class="container mt-3">
<table id="employees" class="highlight centered responsive-table" style="width:100%">
<thead>
<tr>
<th></th>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Salary</th>
</tr>
</thead>
</table>
</div>
</body>
</html>Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|