Datatable inside of Child Row Datatable

Datatable inside of Child Row Datatable

codevikkicodevikki Posts: 2Questions: 0Answers: 0
edited May 28 in Free community support

**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>&nbsp;&nbsp; ' +
                                '<i class="fa fa-edit" onclick="editRow(' + row.id + ')" title="Edit"></i>&nbsp; &nbsp; ' +
                                '<i class="fa fa-copy" onclick="duplicateRow(' + row.id + ')" title="Duplicate"></i>&nbsp; ' +
                                '<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

  • codevikkicodevikki Posts: 2Questions: 0Answers: 0

    Hi Guys

    in this functional wise any doubt please bin: vikkivikki9095@gmail.com o:)

  • colincolin Posts: 15,240Questions: 1Answers: 2,599

    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

Sign In or Register to comment.