Datatable inside of Child Row Datatable
Datatable inside of Child Row Datatable
codevikki
Posts: 2Questions: 0Answers: 0
**That should be the issue fixed now. **
foldername: data.php
$stmt = $pdo->query('SELECT * FROM 18thregistration');
$employees = $stmt->fetchAll(PDO::FETCH_ASSOC);
echo json_encode(['data' => $employees]);
folderName: registration.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>WRIB</title>
<link rel="stylesheet" href="https://cdn.datatables.net/1.11.3/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<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>
</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.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
<script>
$(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 "completed":
statusView = "<font color='#40940C'>" + data + "</font>";
break;
case "manually-completed":
statusView = "<font color='#40940C'>Manu-Completed</font>";
break;
case "modified-completed":
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);
}
</script>
</body>
</html>
Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.
Replies
Hi Guys
in this functional wise any doubt please bin: vikkivikki9095@gmail.com
I'm not clear if you're posting code to benefit others, or whether you have an issue you want support with!
If you have a problem, we're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.
Colin