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.
This discussion has been closed.
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