在数据表中显示多个子行

Question

我想在数据表中显示数据的多个子行。我当前的代码完全按预期工作，但是，当我添加第二条用户记录时，它只是创建了另一个父记录。

尝试了各种示例解决方案，但没有一个具有与我使用的数据类型相同的代码。

<cfset variables.employeeData = #SerializeJSON(qGetMyDirectReports,"struct")#>

<script>

        /* Formatting function for row details - modify as you need */
        $(document).ready(function() {

            var table = $('#employeeData').DataTable( {
                "data": <cfoutput group="ned_id">#variables.employeeData#</cfoutput>,
                "columns": [
                    {
                        "className":        'details-control',
                        "orderable":        false,
                        "data":             null,
                        "defaultContent":   '',
                        "render": function () {
                         return '<i class="fa fa-plus-square" aria-hidden="true"></i>';
                        },
                        width:"15px"
                    },
                    { "data": "NAME" },
                    { "data": "JOB_TITLE" },
                    { "data": "OFFICE" },
                    { "data": "EMAIL_ADDRESS" },
                    { "sName": "RoleId",
                      "orderable":      false,
                      "searchable":     false,
                      "render": function (nTd, sData, oData, iRow, iCol) {
                         return '<a href="pmap.cfm?action=add&employee_ned_id='+ +oData.NED_ID+'"><button class="btn btn-info"><span class="glyphicon glyphicon-plus" title="Add" aria-hidden="true" ></span> ADD PMAP</button></a>';
                        },
                        width:"10%"
                    }
                ],
                "order": [[1, 'asc']]
            });

            // Add event listener for opening and closing details
            $('#employeeData tbody').on('click', 'td.details-control', function () {

                var tr = $(this).closest('tr');
                var tdi = tr.find("i.fa");
                var row = table.row( tr );

                if (row.child.isShown() ) {
                    // This row is already open - close it
                    row.child.hide();
                    tr.removeClass('shown');
                    tdi.first().removeClass('fa-minus-square');
                    tdi.first().addClass('fa-plus-square');
                }
                else {
                    // Open this row
                    row.child( format(row.data()) ).show();
                    tr.addClass('shown');
                    tdi.first().removeClass('fa-plus-square');
                    tdi.first().addClass('fa-minus-square');
                }
            } );

            table.on("user-select", function (e, dt, type, cell, originalEvent) {
                if ($(cell.node()).hasClass("details-control")) {
                    e.preventDefault();
                }
            });
        });

        function format (d) {
            // `d` is the original data object for the row
            return '<table cellpadding="5" cellspacing="0" border="0" style="margin-left:50px; width: 100%">'+
                '<tr style="background-color:lightblue">'+
                        '<td>&nbsp;</td>'+
                        '<td>ID</td>'+
                        '<td>Award</td>'+
                        '<td>Last Action</td>'+
                        '<td>Next Action</td>'+
                        '<td>Dates</td>'+
                        '<td>&nbsp;</td>'+
                    '</tr>'+
                    '<tr>'+
                        '<td><i class="glyphicon glyphicon-edit" aria-hidden="true" title="Edit"></i> Edit</td>'+
                        '<td>'+d.ID+'</td>'+
                        '<td>'+d.AWARD_TYPE+'</td>'+
                        '<td>'+d.STATUS_NAME+'</td>'+
                        '<td>'+d.NEXT_STATUS_NAME+'</td>'+
                        '<td>'+d.START_DATE+'</td>'+
                        '<td><span class="glyphicon glyphicon-remove" aria-hidden="true" title="Delete" style="color:red"></span> Delete</td>'+
                    '</tr>'+
            '</table>';
        }

    </script>

<table class="display table table-striped" id="employeeData" style="width: 100%;">
            <thead>
                <tr>
                    <th></th>
                    <th align="left">Name</th>
                    <th align="left">Position</th>
                    <th align="left">Office</th>
                    <th align="left">Email</th>
                    <th>&nbsp;</th>
                    <th ID="jsDisplay">&nbsp;</th>
                </tr>
            </thead>
        </table>

我希望特定用户ID的所有记录都显示为子记录。