admin管理员组文章数量:1401431
I would like to add a new sublevel to my secondary row on a table that I have made with the help of Datatables, this time I want to generate a new child to my secondary row, I attach an example with which I want to explain and that I found from Datatables which is a what I want to get to, I just get a bit confused by the syntax used here and the one I use in my current code.
I attach the Javascript code with which I build my Datatable with a single child row:
/* Formatting function for row details - modify as you need */
function format1(d) {
// `d` is the original data object for the row
console.log(d);
let tabla = `<table cellpadding="5" cellspacing="0" style="border-collapse: separate; border-spacing: 40px 5px;">
<thead>
<tr>
<th>
Date
</th>
<th>
No. Consecutivo
</th>
</tr>
</thead>
<tbody>`;
d.Consecutivo.forEach(f => {
tabla += `<tr>
<td>${f.Date}</td>
<td>${f.Consecutivo}</td>
</tr>`;
});
tabla += '</tbody></table>';
return tabla;
}
$(document).ready(function () {
$('#example').dataTable( {
responsive : true,
ajax : {
"type": 'POST',
"url" : './test.php',
"dataType": 'JSON',
"cache": false,
"data": {
'param' : 1,
},
},
columns: [
{
"className": 'details-control',
"orderable": false,
"data": null,
"defaultContent": ''
},
{ "data" : "PurchaseOrder" },
{ "data" : "DatePurchaseOrder" },
{ "data" : "Total"},
{ "data" : "Currency" },
{ "data" : "Status" },
],
order : [[1, 'desc']],
} );
// Add event listener for opening and closing details
$('#example tbody').on('click', 'td.details-control', function () {
var tr = $(this).closest('tr');
var row = $('#example').DataTable().row(tr);
if (row.child.isShown()) {
// This row is already open - close it
row.child.hide();
tr.removeClass('shown');
}
else {
// Open this row
row.child(format1(row.data())).show();
tr.addClass('shown');
}
});
});
I would appreciate if someone can give me some guidance on this topic.
Update 1:
Seeing that some are a bit confused by the purpose of my question, I took the trouble to make a small example by hand of what I want to get to.
I explain a little more, the header where the PurchaseOrder is located is the parent row, the No. Consecutivo header is the daughter row of the parent PurchaseOrder row and the Date header is the child row of the No. Consecutivo
Update 2:
Between searching and searching for documentation I came across another example, but it still doesn't give me a clearer idea, I don't know if it's necessary to modify the code I'm using and adapt it to what I've found in the examples or with the code I'm using. what I have planned can be done.
Update 3:
Improving the code a little more, I have reached this point where I can locate the button to expand the second child row, but when clicking on it, it does not expand. I attach an example and share the code already a little improved:
First in the format1() function I just create the table and return it as jQuery array.
When I manipulate the "child rows" (child table), I fill and activate the DataTable when showing and destroy when hiding.
/* Formatting function for row details - modify as you need */
function format1(d) {
// `d` is the original data object for the row
console.log(d);
let tabla = `<table id="tb-${d.PurchaseOrder}" cellpadding="5" cellspacing="0" style="border-collapse: separate; border-spacing: 40px 5px;">
<thead>
<tr>
<th>
No. Consecutivo
</th>
<th>
Date
</th>
</tr>
</thead>
<tbody>
</tbody>
</table>`;
return $(tabla).toArray();
}
$(document).ready(function () {
$('#example').dataTable( {
responsive : true,
ajax : {
"type": 'POST',
"url" : './test.php',
"dataType": 'JSON',
"cache": false,
"data": {
'param' : 1,
},
},
columns: [
{
"className": 'details-control',
"orderable": false,
"data": null,
"defaultContent": ''
},
{ "data" : "PurchaseOrder" },
{ "data" : "DatePurchaseOrder" },
{ "data" : "Total"},
{ "data" : "Currency" },
{ "data" : "Status" },
],
order : [[1, 'desc']],
} );
// Add event listener for opening and closing details
$('#example tbody').on('click', 'td.details-control', function () {
let tr = $(this).closest('tr');
let row = $('#example').DataTable().row(tr);
let rowData = row.data();
let tbId = `#tb-${rowData.PurchaseOrder}`;
if (row.child.isShown()) {
// This row is already open - close it
row.child.hide();
tr.removeClass('shown');
$(tbId).DataTable().destroy();
}
else {
// Open this row
row.child(format1(rowData)).show();
$(tbId).DataTable({
data: rowData.Consecutivo,
"searching": false,
"bPaginate": false,
"info" : false,
columns: [
{
"className": 'details-control1',
"orderable": false,
"data": null,
"defaultContent": ''
},
{ data: 'Consecutivo' },
{ data: 'Date' },
],
});
$(tbId).on('click', 'td.details-control', function(){
var tr = $(this).closest('tr');
var row = $('#example').DataTable().row(tr);
if (row.child.isShown()) {
// This row is already open - close it
row.child.hide();
tr.removeClass('shown');
}
else {
// Open this row
row.child(format1(row.data())).show();
tr.addClass('shown');
}
});
tr.addClass('shown');
}
});
As you can see, I still cannot locate Date as the daughter of No. Consecutivo, as I have explained in previous updates to this question.
Update 4:
As some of the ments say, I add here the source of the data along with the html and the css.
/* Formatting function for row details - modify as you need */
function format1(d) {
// `d` is the original data object for the row
console.log(d);
let tabla = `<table id="tb-${d.PurchaseOrder}" cellpadding="5" cellspacing="0" style="border-collapse: separate; border-spacing: 40px 5px;">
<thead>
<tr>
<th>
No. Consecutivo
</th>
<th>
Date
</th>
</tr>
</thead>
<tbody>
</tbody>
</table>`;
return $(tabla).toArray();
}
$(document).ready(function () {
$('#example').dataTable( {
responsive : true,
ajax : {
"type": 'POST',
"url" : './test.php',
"dataType": 'JSON',
"cache": false,
"data": "data": [
[
"789",
"28/04/2021",
"$100",
"USD",
"Delivered"
],
[
"790",
"27/04/2021",
"$100",
"USD",
"In wait"
],
[
"791",
"28/04/2021",
"$100",
"USD",
"Delivered"
],
[
"792",
"28/04/2021",
"$100",
"USD",
"Delivered"
],
]
},
columns: [
{
"className": 'details-control',
"orderable": false,
"data": null,
"defaultContent": ''
},
{ "data" : "PurchaseOrder" },
{ "data" : "DatePurchaseOrder" },
{ "data" : "Total"},
{ "data" : "Currency" },
{ "data" : "Status" },
],
order : [[1, 'desc']],
} );
// Add event listener for opening and closing details
$('#example tbody').on('click', 'td.details-control', function () {
let tr = $(this).closest('tr');
let row = $('#example').DataTable().row(tr);
let rowData = row.data();
let tbId = `#tb-${rowData.PurchaseOrder}`;
if (row.child.isShown()) {
// This row is already open - close it
row.child.hide();
tr.removeClass('shown');
$(tbId).DataTable().destroy();
}
else {
// Open this row
row.child(format1(rowData)).show();
$(tbId).DataTable({
data: rowData.Consecutivo,
"searching": false,
"bPaginate": false,
"info" : false,
columns: [
{
"className": 'details-control1',
"orderable": false,
"data": null,
"defaultContent": ''
},
{ data: 'Consecutivo' },
{ data: 'Date' },
],
});
$(tbId).on('click', 'td.details-control', function(){
var tr = $(this).closest('tr');
var row = $('#example').DataTable().row(tr);
if (row.child.isShown()) {
// This row is already open - close it
row.child.hide();
tr.removeClass('shown');
}
else {
// Open this row
row.child(format1(row.data())).show();
tr.addClass('shown');
}
});
tr.addClass('shown');
}
});td.details-control {
background: url(.png) no-repeat center center;
cursor: pointer;
width: 30px;
transition: .5s;
}
tr.shown td.details-control {
background: url(.png) no-repeat center center;
width: 30px;
transition: .5s;
}<link href=".5.4/css/buttons.dataTables.min.css" rel="stylesheet"/>
<link href=".2.3/css/responsive.dataTables.min.css" rel="stylesheet"/>
<link href=".10.19/css/jquery.dataTables.min.css" rel="stylesheet"/>
<link href=".1.0/css/bootstrap.min.css" rel="stylesheet"/>
<section class="content">
<div class="row">
<div class="col-xs-12">
<div class="box">
<div class="box-header">
<h3 class="box-title"></h3>
</div>
<div id="box-body" style="padding: 0px 10px 10px 10px;">
<table id="example" class="table table-bordered table-hover">
<thead>
<tr>
<th></th>
<th>PurchaseOrder</th>
<th>DatePurchaseOrder</th>
<th>Total</th>
<th>Currency</th>
<th>Status</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
</div>I would like to add a new sublevel to my secondary row on a table that I have made with the help of Datatables, this time I want to generate a new child to my secondary row, I attach an example with which I want to explain and that I found from Datatables which is a what I want to get to, I just get a bit confused by the syntax used here and the one I use in my current code.
I attach the Javascript code with which I build my Datatable with a single child row:
/* Formatting function for row details - modify as you need */
function format1(d) {
// `d` is the original data object for the row
console.log(d);
let tabla = `<table cellpadding="5" cellspacing="0" style="border-collapse: separate; border-spacing: 40px 5px;">
<thead>
<tr>
<th>
Date
</th>
<th>
No. Consecutivo
</th>
</tr>
</thead>
<tbody>`;
d.Consecutivo.forEach(f => {
tabla += `<tr>
<td>${f.Date}</td>
<td>${f.Consecutivo}</td>
</tr>`;
});
tabla += '</tbody></table>';
return tabla;
}
$(document).ready(function () {
$('#example').dataTable( {
responsive : true,
ajax : {
"type": 'POST',
"url" : './test.php',
"dataType": 'JSON',
"cache": false,
"data": {
'param' : 1,
},
},
columns: [
{
"className": 'details-control',
"orderable": false,
"data": null,
"defaultContent": ''
},
{ "data" : "PurchaseOrder" },
{ "data" : "DatePurchaseOrder" },
{ "data" : "Total"},
{ "data" : "Currency" },
{ "data" : "Status" },
],
order : [[1, 'desc']],
} );
// Add event listener for opening and closing details
$('#example tbody').on('click', 'td.details-control', function () {
var tr = $(this).closest('tr');
var row = $('#example').DataTable().row(tr);
if (row.child.isShown()) {
// This row is already open - close it
row.child.hide();
tr.removeClass('shown');
}
else {
// Open this row
row.child(format1(row.data())).show();
tr.addClass('shown');
}
});
});
I would appreciate if someone can give me some guidance on this topic.
Update 1:
Seeing that some are a bit confused by the purpose of my question, I took the trouble to make a small example by hand of what I want to get to.
I explain a little more, the header where the PurchaseOrder is located is the parent row, the No. Consecutivo header is the daughter row of the parent PurchaseOrder row and the Date header is the child row of the No. Consecutivo
Update 2:
Between searching and searching for documentation I came across another example, but it still doesn't give me a clearer idea, I don't know if it's necessary to modify the code I'm using and adapt it to what I've found in the examples or with the code I'm using. what I have planned can be done.
Update 3:
Improving the code a little more, I have reached this point where I can locate the button to expand the second child row, but when clicking on it, it does not expand. I attach an example and share the code already a little improved:
First in the format1() function I just create the table and return it as jQuery array.
When I manipulate the "child rows" (child table), I fill and activate the DataTable when showing and destroy when hiding.
/* Formatting function for row details - modify as you need */
function format1(d) {
// `d` is the original data object for the row
console.log(d);
let tabla = `<table id="tb-${d.PurchaseOrder}" cellpadding="5" cellspacing="0" style="border-collapse: separate; border-spacing: 40px 5px;">
<thead>
<tr>
<th>
No. Consecutivo
</th>
<th>
Date
</th>
</tr>
</thead>
<tbody>
</tbody>
</table>`;
return $(tabla).toArray();
}
$(document).ready(function () {
$('#example').dataTable( {
responsive : true,
ajax : {
"type": 'POST',
"url" : './test.php',
"dataType": 'JSON',
"cache": false,
"data": {
'param' : 1,
},
},
columns: [
{
"className": 'details-control',
"orderable": false,
"data": null,
"defaultContent": ''
},
{ "data" : "PurchaseOrder" },
{ "data" : "DatePurchaseOrder" },
{ "data" : "Total"},
{ "data" : "Currency" },
{ "data" : "Status" },
],
order : [[1, 'desc']],
} );
// Add event listener for opening and closing details
$('#example tbody').on('click', 'td.details-control', function () {
let tr = $(this).closest('tr');
let row = $('#example').DataTable().row(tr);
let rowData = row.data();
let tbId = `#tb-${rowData.PurchaseOrder}`;
if (row.child.isShown()) {
// This row is already open - close it
row.child.hide();
tr.removeClass('shown');
$(tbId).DataTable().destroy();
}
else {
// Open this row
row.child(format1(rowData)).show();
$(tbId).DataTable({
data: rowData.Consecutivo,
"searching": false,
"bPaginate": false,
"info" : false,
columns: [
{
"className": 'details-control1',
"orderable": false,
"data": null,
"defaultContent": ''
},
{ data: 'Consecutivo' },
{ data: 'Date' },
],
});
$(tbId).on('click', 'td.details-control', function(){
var tr = $(this).closest('tr');
var row = $('#example').DataTable().row(tr);
if (row.child.isShown()) {
// This row is already open - close it
row.child.hide();
tr.removeClass('shown');
}
else {
// Open this row
row.child(format1(row.data())).show();
tr.addClass('shown');
}
});
tr.addClass('shown');
}
});
As you can see, I still cannot locate Date as the daughter of No. Consecutivo, as I have explained in previous updates to this question.
Update 4:
As some of the ments say, I add here the source of the data along with the html and the css.
/* Formatting function for row details - modify as you need */
function format1(d) {
// `d` is the original data object for the row
console.log(d);
let tabla = `<table id="tb-${d.PurchaseOrder}" cellpadding="5" cellspacing="0" style="border-collapse: separate; border-spacing: 40px 5px;">
<thead>
<tr>
<th>
No. Consecutivo
</th>
<th>
Date
</th>
</tr>
</thead>
<tbody>
</tbody>
</table>`;
return $(tabla).toArray();
}
$(document).ready(function () {
$('#example').dataTable( {
responsive : true,
ajax : {
"type": 'POST',
"url" : './test.php',
"dataType": 'JSON',
"cache": false,
"data": "data": [
[
"789",
"28/04/2021",
"$100",
"USD",
"Delivered"
],
[
"790",
"27/04/2021",
"$100",
"USD",
"In wait"
],
[
"791",
"28/04/2021",
"$100",
"USD",
"Delivered"
],
[
"792",
"28/04/2021",
"$100",
"USD",
"Delivered"
],
]
},
columns: [
{
"className": 'details-control',
"orderable": false,
"data": null,
"defaultContent": ''
},
{ "data" : "PurchaseOrder" },
{ "data" : "DatePurchaseOrder" },
{ "data" : "Total"},
{ "data" : "Currency" },
{ "data" : "Status" },
],
order : [[1, 'desc']],
} );
// Add event listener for opening and closing details
$('#example tbody').on('click', 'td.details-control', function () {
let tr = $(this).closest('tr');
let row = $('#example').DataTable().row(tr);
let rowData = row.data();
let tbId = `#tb-${rowData.PurchaseOrder}`;
if (row.child.isShown()) {
// This row is already open - close it
row.child.hide();
tr.removeClass('shown');
$(tbId).DataTable().destroy();
}
else {
// Open this row
row.child(format1(rowData)).show();
$(tbId).DataTable({
data: rowData.Consecutivo,
"searching": false,
"bPaginate": false,
"info" : false,
columns: [
{
"className": 'details-control1',
"orderable": false,
"data": null,
"defaultContent": ''
},
{ data: 'Consecutivo' },
{ data: 'Date' },
],
});
$(tbId).on('click', 'td.details-control', function(){
var tr = $(this).closest('tr');
var row = $('#example').DataTable().row(tr);
if (row.child.isShown()) {
// This row is already open - close it
row.child.hide();
tr.removeClass('shown');
}
else {
// Open this row
row.child(format1(row.data())).show();
tr.addClass('shown');
}
});
tr.addClass('shown');
}
});td.details-control {
background: url(https://www.datatables/examples/resources/details_open.png) no-repeat center center;
cursor: pointer;
width: 30px;
transition: .5s;
}
tr.shown td.details-control {
background: url(https://www.datatables/examples/resources/details_close.png) no-repeat center center;
width: 30px;
transition: .5s;
}<link href="https://cdn.datatables/buttons/1.5.4/css/buttons.dataTables.min.css" rel="stylesheet"/>
<link href="https://cdn.datatables/responsive/2.2.3/css/responsive.dataTables.min.css" rel="stylesheet"/>
<link href="https://cdn.datatables/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn./bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<section class="content">
<div class="row">
<div class="col-xs-12">
<div class="box">
<div class="box-header">
<h3 class="box-title"></h3>
</div>
<div id="box-body" style="padding: 0px 10px 10px 10px;">
<table id="example" class="table table-bordered table-hover">
<thead>
<tr>
<th></th>
<th>PurchaseOrder</th>
<th>DatePurchaseOrder</th>
<th>Total</th>
<th>Currency</th>
<th>Status</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
</div>Update 5:
In the ajax call I am using the following statement where I use console.log to get the response through ajax
$(document).ready(function () {
$('#example').dataTable( {
responsive : true,
ajax : {
"type": 'POST',
"url" : './test.php',
"dataType": 'JSON',
"cache": false,
"data": {
function (d) {
console.log(d);
}
},
},
But when using console.log I get the following message in console
undefined
- Please add html, css and some dummy data to your example, even if it doesn't work. Since the data from the two examples is different it is hard to reproduce. – biberman Commented May 2, 2021 at 10:28
- @biberman Hi, I just added a snippet with the code I use – user15500092 Commented May 3, 2021 at 17:42
-
Thanks @user11804298 for adding the code. Unfortunately the dummy data is missing. If it's just the information from your screenshot then i need no extra data. But if there are more nested level it is necessary. Especially how deep the data is nested, is of interest. It would be enough to add it as an array or object since the ajax request from test.php is not allowed due to cross origin policy. So replace
ajax: {...}withdata: { dummy data }. – biberman Commented May 3, 2021 at 21:05 - I'm also curious how the data that you get via ajax is structured... – biberman Commented May 3, 2021 at 21:23
- @biberman You can check the snippet again, I just added the missing data – user15500092 Commented May 3, 2021 at 21:42
3 Answers
Reset to default 2I found some issues:
- in your format1 function you declare just two columns, but in the datatable you try to fill three columns
- the data that you offer for the inner datatable is only the value of
rowData['Consecutivo']which is "1000" but the datatable expects the data to be an array of objects; therefor you should offer the rowData object wrapped in square brackets:[rowData] - with every click on a green button a new event handler is declared for the third table; therefor you should close it with
off('click')before destroying the inner datatable - the document ready function is not closed (in the example); therefor i added
}); responsive : truein the main datatable hides the status column; therefor i deleted it- the class
details-control1is not defined in css and therefor is no visible button likedetails-control; therefor i deleted the last char1although the button is without a function since there seems to be no deeper nested data to show in a second level datatable (at least there was none mentioned in the question)
Since the ajax call isn't working in the stack snippet i hardcoded the data i could see in the images of your example (as purchase_data) and imagined more "No. Consecutivo" and "Date" values for the other three purchase orders. So i replaced for that example
ajax : {
"type": 'POST',
"url" : './test.php',
"dataType": 'JSON',
"cache": false,
"data": {
'param' : 1,
},
},
with
data: purchase_data,
Working example:
var purchase_data = [
{
PurchaseOrder: 789,
DatePurchaseOrder: "27/04/2021",
Total: "$100",
Currency: "USD",
Status: "Delivered",
Consecutivo: 999,
Date: "26/04/2021"
}, {
PurchaseOrder: 790,
DatePurchaseOrder: "27/04/2021",
Total: "$100",
Currency: "USD",
Status: "In Wait",
Consecutivo: 1000,
Date: "26/04/2021"
}, {
PurchaseOrder: 791,
DatePurchaseOrder: "28/04/2021",
Total: "$100",
Currency: "USD",
Status: "Delivered",
Consecutivo: 1001,
Date: "27/04/2021"
}, {
PurchaseOrder: 792,
DatePurchaseOrder: "28/04/2021",
Total: "$100",
Currency: "USD",
Status: "Delivered",
Consecutivo: 1002,
Date: "27/04/2021"
},
];
/* Formatting function for row details - modify as you need */
function format1(d) {
// `d` is the original data object for the row
console.log(d);
let tabla = `<table id="tb-${d.PurchaseOrder}" cellpadding="5" cellspacing="0" style="border-collapse: separate; border-spacing: 40px 5px;">
<thead>
<tr>
<th></th>
<th>
No. Consecutivo
</th>
<th>
Date
</th>
</tr>
</thead>
<tbody>
</tbody>
</table>`;
return $(tabla).toArray();
}
$(document).ready(function () {
$('#example').DataTable({
data: purchase_data,
columns: [
{
"className": 'details-control',
"orderable": false,
"data": null,
"defaultContent": ''
},
{ "data" : "PurchaseOrder" },
{ "data" : "DatePurchaseOrder" },
{ "data" : "Total"},
{ "data" : "Currency" },
{ "data" : "Status" }
],
order : [[1, 'desc']]
});
// Add event listener for opening and closing details
$('#example tbody').on('click', 'td.details-control', function () {
let tr = $(this).closest('tr');
let row = $('#example').DataTable().row(tr);
let rowData = row.data();
let tbId = `#tb-${rowData.PurchaseOrder}`;
if (row.child.isShown()) {
// This row is already open - close it
row.child.hide();
tr.removeClass('shown');
$(tbId).DataTable().destroy();
}
else {
// Open this row
row.child(format1(rowData)).show();
$(tbId).DataTable({
data: [rowData],
"searching": false,
"bPaginate": false,
"info" : false,
columns: [
{
"className": 'details-control',
"orderable": false,
"data": null,
"defaultContent": ''
},
{ data: 'Consecutivo' },
{ data: 'Date' }
]
});
tr.addClass('shown');
}
});
});.content {
padding: 15px;
}
td.details-control {
background: url(https://www.datatables/examples/resources/details_open.png) no-repeat center center;
cursor: pointer;
width: 30px;
transition: .5s;
}
tr.shown td.details-control {
background: url(https://www.datatables/examples/resources/details_close.png) no-repeat center center;
width: 30px;
transition: .5s;
}
table.dataTable td table.dataTable,
table.dataTable td table.dataTable * {
border: none;
}<link href="https://cdn.datatables/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn./bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables/1.10.19/js/jquery.dataTables.min.js"></script>
<section class="content">
<div class="row">
<div class="col-xs-12">
<div class="box">
<div class="box-header">
<h3 class="box-title">Stackoverflow Test</h3>
</div>
<div id="box-body" style="padding: 0px 10px 10px 10px;">
<table id="example" class="table table-bordered table-hover">
<thead>
<tr>
<th></th>
<th>PurchaseOrder</th>
<th>DatePurchaseOrder</th>
<th>Total</th>
<th>Currency</th>
<th>Status</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
</div>
</section>By the way: If there is really no deeper nested data (like the images suggest), the second datatable isn't necessary since there is only one row in the inner table. So an ordinary html table would be enough and can be made with the format1 function since it already has got the rowData.
Working example:
var purchase_data = [
{
PurchaseOrder: 789,
DatePurchaseOrder: "27/04/2021",
Total: "$100",
Currency: "USD",
Status: "Delivered",
Consecutivo: 999,
Date: "26/04/2021"
}, {
PurchaseOrder: 790,
DatePurchaseOrder: "27/04/2021",
Total: "$100",
Currency: "USD",
Status: "In Wait",
Consecutivo: 1000,
Date: "26/04/2021"
}, {
PurchaseOrder: 791,
DatePurchaseOrder: "28/04/2021",
Total: "$100",
Currency: "USD",
Status: "Delivered",
Consecutivo: 1001,
Date: "27/04/2021"
}, {
PurchaseOrder: 792,
DatePurchaseOrder: "28/04/2021",
Total: "$100",
Currency: "USD",
Status: "Delivered",
Consecutivo: 1002,
Date: "27/04/2021"
},
];
var tabla;
$(document).ready(function () {
/* Formatting function for row details - modify as you need */
function format(d) {
// `d` is the original data object for the row
let tabla = '<table id="tb-' + d.PurchaseOrder + '" cellpadding="5" cellspacing="0" style="border-collapse: separate; border-spacing: 40px 5px;">' +
'<thead>' +
'<tr>' +
'<th>No. Consecutivo</th>' +
'<th>Date</th>' +
'</tr>' +
'</thead>' +
'<tbody>' +
'<tr>' +
'<td>' + d.Consecutivo + '</td>' +
'<td>' + d.Date + '</td>' +
'</tr>' +
'</tbody>' +
'</table>';
return $(tabla).toArray();
}
var table = $('#example').DataTable({
data: purchase_data,
columns: [
{
className: 'details-control',
orderable: false,
data: null,
defaultContent: ''
},
{ data: "PurchaseOrder" },
{ data: "DatePurchaseOrder" },
{ data: "Total"},
{ data: "Currency" },
{ data: "Status" }
],
order: [[1, 'desc']]
});
// Add event listener for opening and closing details
$('#example tbody').on('click', 'td.details-control', function () {
let tr = $(this).closest('tr');
let row = table.row(tr);
let rowData = row.data();
let tbId = '#tb-' + rowData.PurchaseOrder;
if (row.child.isShown()) {
// This row is already open - close it
row.child.hide();
tr.removeClass('shown');
$(tbId).DataTable().destroy();
}
else {
// Open this row
row.child(format(rowData)).show();
tr.addClass('shown');
}
});
});.content {
padding: 15px;
}
td.details-control {
background: url(https://www.datatables/examples/resources/details_open.png) no-repeat center center;
cursor: pointer;
width: 30px;
transition: .5s;
}
tr.shown td.details-control {
background: url(https://www.datatables/examples/resources/details_close.png) no-repeat center center;
width: 30px;
transition: .5s;
}
table.dataTable td table,
table.dataTable td table * {
border: none !important;
}<link href="https://cdn.datatables/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn./bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables/1.10.19/js/jquery.dataTables.min.js"></script>
<section class="content">
<div class="row">
<div class="col-xs-12">
<div class="box">
<div class="box-header">
<h3 class="box-title">Stackoverflow Test</h3>
</div>
<div id="box-body" style="padding: 0px 10px 10px 10px;">
<table id="example" class="table table-bordered table-hover">
<thead>
<tr>
<th></th>
<th>PurchaseOrder</th>
<th>DatePurchaseOrder</th>
<th>Total</th>
<th>Currency</th>
<th>Status</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
</div>
</section>If you want the inner table split in two nested inner tables with only one row and only one key value pair (like the first image suggests) you need a second format function.
Working example:
var purchase_data = [
{
PurchaseOrder: 789,
DatePurchaseOrder: "27/04/2021",
Total: "$100",
Currency: "USD",
Status: "Delivered",
Consecutivo: 999,
Date: "26/04/2021"
}, {
PurchaseOrder: 790,
DatePurchaseOrder: "27/04/2021",
Total: "$100",
Currency: "USD",
Status: "In Wait",
Consecutivo: 1000,
Date: "26/04/2021"
}, {
PurchaseOrder: 791,
DatePurchaseOrder: "28/04/2021",
Total: "$100",
Currency: "USD",
Status: "Delivered",
Consecutivo: 1001,
Date: "27/04/2021"
}, {
PurchaseOrder: 792,
DatePurchaseOrder: "28/04/2021",
Total: "$100",
Currency: "USD",
Status: "Delivered",
Consecutivo: 1002,
Date: "27/04/2021"
},
];
/* Formatting function for row details - modify as you need */
function format1(d) {
// `d` is the original data object for the row
let tabla = `<table id="tb-${d.PurchaseOrder}" cellpadding="5" cellspacing="0" style="border-collapse: separate; border-spacing: 40px 5px;">
<thead>
<tr>
<th></th>
<th>
No. Consecutivo
</th>
</tr>
</thead>
<tbody>
</tbody>
</table>`;
return $(tabla).toArray();
}
function format2(d) {
// `d` is the original data object for the row
let tabla = `<table id="tb-${d.Consecutivo}" cellpadding="5" cellspacing="0" style="border-collapse: separate; border-spacing: 40px 5px;">
<thead>
<tr>
<th></th>
<th>
Date
</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td>
${d.Date}
</td>
</tr>
</tbody>
</table>`;
return $(tabla).toArray();
}
$(document).ready(function () {
$('#example').DataTable({
data: purchase_data,
columns: [
{
"className": 'details-control',
"orderable": false,
"data": null,
"defaultContent": ''
},
{ "data" : "PurchaseOrder" },
{ "data" : "DatePurchaseOrder" },
{ "data" : "Total"},
{ "data" : "Currency" },
{ "data" : "Status" }
],
order : [[1, 'desc']]
});
// Add event listener for opening and closing details
$('#example tbody').on('click', 'td.details-control', function () {
let tr = $(this).closest('tr');
let row = $('#example').DataTable().row(tr);
let rowData = row.data();
let tbId = `#tb-${rowData.PurchaseOrder}`;
if (row.child.isShown()) {
// This row is already open - close it
row.child.hide();
tr.removeClass('shown');
$(tbId).off('click');
$(tbId).DataTable().destroy();
}
else {
// Open this row
row.child(format1(rowData)).show();
$(tbId).DataTable({
data: [rowData],
"searching": false,
"bPaginate": false,
"info" : false,
columns: [
{
"className": 'details-control1',
"orderable": false,
"data": null,
"defaultContent": ''
},
{ data: 'Consecutivo' }
]
});
tr.addClass('shown');
// Add event listener for opening and closing details
$(tbId).on('click', 'td.details-control1', function () {
let tr = $(this).closest('tr');
let row = $(tbId).DataTable().row(tr);
let rowData = row.data();
if (row.child.isShown()) {
// This row is already open - close it
row.child.hide();
tr.removeClass('shown');
}
else {
// Open this row
row.child(format2(rowData)).show();
tr.addClass('shown');
}
});
}
});
});.content {
padding: 15px;
}
td.details-control1,
td.details-control {
background: url(https://www.datatables/examples/resources/details_open.png) no-repeat center center;
cursor: pointer;
width: 30px;
transition: .5s;
}
tr.shown td.details-control1,
tr.shown td.details-control {
background: url(https://www.datatables/examples/resources/details_close.png) no-repeat center center;
width: 30px;
transition: .5s;
}
table.dataTable td table,
table.dataTable td table * {
border: none !important;
}<link href="https://cdn.datatables/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn./bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables/1.10.19/js/jquery.dataTables.min.js"></script>
<section class="content">
<div class="row">
<div class="col-xs-12">
<div class="box">
<div class="box-header">
<h3 class="box-title">Stackoverflow Test</h3>
</div>
<div id="box-body" style="padding: 0px 10px 10px 10px;">
<table id="example" class="table table-bordered table-hover">
<thead>
<tr>
<th></th>
<th>PurchaseOrder</th>
<th>DatePurchaseOrder</th>
<th>Total</th>
<th>Currency</th>
<th>Status</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
</div>
</section>If it is important for you that the inner tables are as wide as the main table (like suggested in the first image) there is a bit more css necessary.
Working example:
var purchase_data = [
{
PurchaseOrder: 789,
DatePurchaseOrder: "27/04/2021",
Total: "$100",
Currency: "USD",
Status: "Delivered",
Consecutivo: 999,
Date: "26/04/2021"
}, {
PurchaseOrder: 790,
DatePurchaseOrder: "27/04/2021",
Total: "$100",
Currency: "USD",
Status: "In Wait",
Consecutivo: 1000,
Date: "26/04/2021"
}, {
PurchaseOrder: 791,
DatePurchaseOrder: "28/04/2021",
Total: "$100",
Currency: "USD",
Status: "Delivered",
Consecutivo: 1001,
Date: "27/04/2021"
}, {
PurchaseOrder: 792,
DatePurchaseOrder: "28/04/2021",
Total: "$100",
Currency: "USD",
Status: "Delivered",
Consecutivo: 1002,
Date: "27/04/2021"
},
];
/* Formatting function for row details - modify as you need */
function format1(d) {
// `d` is the original data object for the row
let tabla = `<table id="tb-${d.PurchaseOrder}" cellpadding="5" cellspacing="0" style="width: 100%;">
<thead>
<tr>
<th class="details"></th>
<th>
No. Consecutivo
</th>
</tr>
</thead>
<tbody>
</tbody>
</table>`;
return $(tabla).toArray();
}
function format2(d) {
// `d` is the original data object for the row
let tabla = `<table id="tb-${d.Consecutivo}" cellpadding="5" cellspacing="0" style="width: 100%; border-collapse: separate;">
<thead>
<tr>
<th class="details"></th>
<th>
Date
</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td>
${d.Date}
</td>
</tr>
</tbody>
</table>`;
return $(tabla).toArray();
}
$(document).ready(function () {
$('#example').DataTable({
data: purchase_data,
columns: [
{
className: 'details-control',
orderable: false,
data: null,
defaultContent: ''
},
{ data: "PurchaseOrder" },
{ data: "DatePurchaseOrder" },
{ data: "Total"},
{ data: "Currency" },
{ data: "Status" }
],
order: [[1, 'desc']]
});
// Add event listener for opening and closing details
$('#example tbody').on('click', 'td.details-control', function () {
let tr = $(this).closest('tr');
let row = $('#example').DataTable().row(tr);
let rowData = row.data();
let tbId = `#tb-${rowData.PurchaseOrder}`;
if (row.child.isShown()) {
// This row is already open - close it
row.child.hide();
tr.removeClass('shown');
$(tbId).off('click');
$(tbId).DataTable().destroy();
}
else {
// Open this row
row.child(format1(rowData)).show();
$(tbId).DataTable({
data: [rowData],
searching: false,
bPaginate: false,
info: false,
columns: [
{
className: 'details details-control1',
orderable: false,
data: null,
defaultContent: ''
},
{ data: 'Consecutivo' }
],
order: []
});
tr.addClass('shown');
// Add event listener for opening and closing details
$(tbId).on('click', 'td.details-control1', function () {
let tr = $(this).closest('tr');
let row = $(tbId).DataTable().row(tr);
let rowData = row.data();
if (row.child.isShown()) {
// This row is already open - close it
row.child.hide();
tr.removeClass('shown');
}
else {
// Open this row
row.child(format2(rowData)).show();
tr.addClass('shown');
}
});
}
});
});.content {
padding: 15px;
}
.details {
width: 16px;
}
table.dataTable tbody td[colspan] {
padding: 0px;
border: none;
}
table.dataTable.no-footer {
border: none;
}
table.dataTable tbody th, table.dataTable tbody td {
border-bottom-color: #dee2e6;
}
td.details-control1,
td.details-control {
background: url(https://www.datatables/examples/resources/details_open.png) no-repeat center center;
cursor: pointer;
transition: .5s;
}
tr.shown td.details-control1,
tr.shown td.details-control {
background: url(https://www.datatables/examples/resources/details_close.png) no-repeat center center;
transition: .5s;
}
table.dataTable td table {
width: 100%;
}<link href="https://cdn.datatables/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn./bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables/1.10.19/js/jquery.dataTables.min.js"></script>
<section class="content">
<div class="row">
<div class="col-xs-12">
<div class="box">
<div class="box-header">
<h3 class="box-title">Stackoverflow Test</h3>
</div>
<div id="box-body" style="padding: 0px 10px 10px 10px;">
<table id="example" class="table table-bordered table-hover">
<thead>
<tr>
<th></th>
<th>PurchaseOrder</th>
<th>DatePurchaseOrder</th>
<th>Total</th>
<th>Currency</th>
<th>Status</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
</div>
</section>One option is to create the child row as a Datatable. Then create a second format function for the child Datatable. You can start with this blog to see how to create a child Datatable. You can ignore the Editor configuration. Also take a look at this example from this thread.
The parent Datatable doesn't know about the content of the child row and the Datatables API's like row().child().show() (here)aren't available. If you don't want the child to be a Datatable then you will need to create the code to show the sub-child rows.
issue will be fixed
$(document).ready(function() {
function format(rowData, tableId) {
return '<table id="' + tableId + '" cellpadding="5" cellspacing="0" border="0">'+
'</table>';
}
var table = $('#example').DataTable({
"ajax": "data.php",
"columns": [
{
"data": null,
"orderable": false,
"render": function (data, type, row) {
return '<input type="checkbox" class="row-checkbox" value="' + row.id + '" >'
}
},
{
"data": null,
"orderable": true,
"render": function (data, type, row) {
return '<div class="action-buttons">' +
'<i class="fa fa-trash" onclick="deleteRow(' + row.id + ')" title="Delete"></i> ' +
'<i class="fa fa-edit" onclick="editRow(' + row.id + ')" title="Edit"></i> ' +
'<i class="fa fa-copy" onclick="duplicateRow(' + row.id + ')" title="Duplicate"></i> ' +
'<i class="fa fa-ban" onclick="disableRow(' + row.id + ')" title="Disable"></i>' +
'</div>';
}
},
{
"className": 'details-control',
"orderable": true,
"defaultContent": '',
"data": "status",
"render": function(data, type, row) {
let statusHtml;
let statusView;
var rowId = row.id;
switch (data) {
case "pleted":
statusView = "<font color='#40940C'>" + data + "</font>";
break;
case "manually-pleted":
statusView = "<font color='#40940C'>Manu-Completed</font>";
break;
case "modified-pleted":
statusView = "<font class='txt_blue'>Mod-Completed</font>";
break;
case "pending":
statusView = "<font color='#C29C34'>" + data + "</font>";
break;
case "cancelled":
statusView = "<font color='#BF366D'>" + data + "</font>";
break;
case "postponed":
statusView = "<font color='#BF366D'>" + data + "</font>";
break;
case "deleted":
statusView = "<font color='#FF0000'>" + data + "</font>";
break;
case "modified":
statusView = "<span onclick='showModified(" + rowId + ")' class='modified_style' style=text-decoration: none;><font color='#40940C' style=text-decoration: none;>Mod-OrigCompleted</font></span>";
break;
}
return "<td style='text-transform:capitalize'>" + statusView + "<br><label id='changes_" + rowId + "'></label></td>";
}
},
{ "data": "firstName" },
{ "data": "id" }
],
"order": [[1, 'desc']]
});
// Handle click on "Select all" control
$('#selectAll').on('click', function(){
var rows = table.rows({ 'search': 'applied' }).nodes();
$('input[type="checkbox"]', rows).prop('checked', this.checked);
});
// Handle click on individual row checkboxes
$('#example tbody').on('change', 'input[type="checkbox"]', function(){
if (!this.checked){
var el = $('#selectAll').get(0);
if (el && el.checked && ('indeterminate' in el)){
el.indeterminate = true;
}
}
var allChecked = true;
var rows = table.rows({ 'search': 'applied' }).nodes();
$('input[type="checkbox"]', rows).each(function(){
if (!this.checked) {
allChecked = false;
}
});
$('#selectAll').prop('checked', allChecked);
$('#selectAll').prop('indeterminate', !allChecked && $('input[type="checkbox"]', rows).length > 0);
});
// Add event listener for opening and closing details
$('#example tbody').on('click', 'td.details-control', function() {
var tr = $(this).closest('tr');
var row = table.row(tr);
var rowData = row.data();
childTableId = rowData.id;
if (row.child.isShown()) {
row.child.hide();
tr.removeClass('shown');
} else {
row.child(format(rowData, childTableId)).show();
$('#' + childTableId).DataTable({
dom: "t",
ajax: "data.php",
columns: [
{ data: "id", title: 'ID' },
{ data: "firstName", title: 'FNAME' },
{ data: "lastName", title: 'LNAME' },
{ data: "emailAddress", title: 'EMAIL' },
{ data: "status", title: 'STATUS' },
],
scrollY: '100px',
select: true,
});
tr.addClass('shown');
}
});
});
function editRow(id) {
alert('Edit row with ID: ' + id);
}
function deleteRow(id) {
alert('Delete row with ID: ' + id);
}
function duplicateRow(id) {
alert('Duplicate row with ID: ' + id);
}
function disableRow(id) {
alert('Disable row with ID: ' + id);
}
function showModified(newval) {
alert('Status Modified: ' + newval);
}<style>
.child-content {
display: none;
background-color: #fcba03;
padding: 10px;
border: 1px solid #28fc03;
margin-top: 10px;
}
.dataTables_wrapper {
width: 100%;
margin: 0 auto;
}
#example th, #example td {
text-align: center;
}
.childtable {
display: flex;
}
.childcolumn {
margin-bottom: 1em;
width: 50%;
}
.childrow {
border: 1px black solid;
height: 2em;
margin: auto;
width: 50%;
}
</style><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>WRIB</title>
<link rel="stylesheet" href="https://cdn.datatables/1.11.3/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare./ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body>
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th><input type="checkbox" id="selectAll"></th>
<th>Del / Edit / Copy <br>Registration#</th>
<th>Status</th>
<th>Name</th>
<th>Badge / Password</th>
</tr>
</thead>
</table>
<script src="https://code.jquery./jquery-3.6.0.min.js"></script>
<script src="https://cdn.datatables/1.11.3/js/jquery.dataTables.min.js"></script>
<script>
// script
</script>
</body>
</html>本文标签： javascriptHow to add a subrow to a child row in DatatablesStack Overflow
版权声明：本文标题：javascript - How to add a sub-row to a child row in Datatables - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744222822a2595949.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论