DataTables展开行以显示其他详细信息

Question

我在网页上有一个DataTables，并希望能够点击该行的任意位置以展开它并显示一些其他信息the docs。但是我没有在JS / Ajax中设置我的表，它只是一个从PHP加载动态信息的HTML表。

这是我的表格：

这是表格代码：

<table id="tickets" class="table table-striped">
    <thead>
        <tr>
            <th>Ticket #</th>
            <th>Agent</th>
            <th>Ext.</th>
            <th>Ticket Date</th>
            <th>Subject</th>
            <!-- <th>Text</th> -->
            <th>Status</th>
            <th>Edit</th>
        </tr>
    </thead>

    <tbody>
        <?php
            if (pg_num_rows($ticketsQuery) > 0) {
                foreach ($ticketsList as $value) {
                    echo "<tr>";
                        echo "<td class='col-xs-1'>" . $value['incident_number'] . "</td>";
                        echo "<td class='col-xs-2'>" . $value['agent'];
                        if ($value['additional_agent_1'] != '') {
                            echo "<br>" . $value['additional_agent_1'];
                        }
                        if ($value['additional_agent_2'] != '') {
                            echo "<br>" . $value['additional_agent_2'];
                        }
                        if ($value['additional_agent_3'] != '') {
                            echo "<br>" . $value['additional_agent_3'];
                        }
                        echo "</td>";

                        if ($value['agent_extension'] != '' && $value['agent_extension'] != null) {
                            echo "<td class='col-xs-1'>ext. " . $value['agent_extension'] . "</td>";
                        } else {
                            echo "<td class='col-xs-1'></td>";
                        }

                        echo "<td class='col-xs-2'>" . date("D, M. j, Y", strtotime($value['incident_opening_date'])) . "</td>";

                        echo "<td class='col-xs-3'>" . $value['incident_subject'] . "</td>";

                        echo "<td class='col-xs-2'>" . $value['incident_status'] . "</td>";

                        echo "<td class='col-xs-1 text-center'>";
                            echo "<form action='edit_tickets.php' method='post' style='display:inline-block;'>";
                                echo "<button class='btn btn-info btn-xs' id='btnEditTicket' name='btnEditTicket' value='" . $value['incident_number'] . "'>Edit</button>";
                            echo "</form>";
                        echo "</td>";
                    echo "</tr>";
                }
                unset($value);  // Unset the foreach value
            }
        ?>
    </tbody>
</table>

这是我的DataTable init：

<script>
    $(document).ready(function() {
        $('#tickets').DataTable({
            dom: "<'row'<'col-xs-12 col-sm-6 col-sm-push-2'B><'col-xs-6 col-sm-2 col-sm-pull-6'l><'col-xs-6 col-sm-4'f>>" +
                    "<'row'<'col-xs-6'><'col-xs-6'>>" +
                    "<'row'<'col-xs-12't>>" +
                    "<'row'<'col-xs-12 col-sm-4'i><'col-xs-12 col-sm-8'p>>",
            buttons: [
                'copy',
                'csv',
                'excel',
                'pdf',
                {
                    extend: 'print'
                }
            ],
            columnDefs: [ {
                targets: [ 0 ],
                orderData: [ 0, 1 ]
            }, {
                targets: [ 1 ],
                orderData: [ 1, 0 ]
            } ],
            "order": [[3, "desc" ]]
        });
    });
</script>

这是最终目标：