Html 带有2 TR的数据表未显示分页、搜索和排序

我使用DataTable和accordian折叠在表中显示数据，在第一个tr中单击“单击查看”，第二个tr中的div将展开以显示数据。大约有25条记录正在从数据库中提取。现在面临的问题是分页、排序、显示[10]条目、搜索框根本不显示以及所有数据同时显示。我需要做哪些更改才能使其正常工作？以下是带有2 tr的结构

<table class="table table-bordered table-condensed dataTable" id="odata">
<thead>
    <tr>
        <th>#</th>
        <th>A</th>
        <th>B</th>
        <th>C</th>
        <th>D</th>
        <th>E</th>
        <th>F</th>
        <th>G</th>
        <th>H</th>
        <th>View</th>
    </tr>
</thead>
<tbody >
<!------------ Inside For Loop - Start -------------------->
    <tr id="1">
        <td>1.</td>
        <td>A from DB</td>
        <td>B from DB</td>
        <td>C from DB</td>
        <td>D from DB</td>
        <td>E from DB</td>
        <td>F from DB</td>
        <td>G from DB</td>
        <td>H from DB</td>
        <td class="accordion-toggle" data-toggle="collapse" data-target="demo_x">Click to View</td> <!------------ x changes with for loop index ----------->
    </tr>
    <tr>
        <td colspan="12" class="hiddenRow" style="border-top: 0;"><div id="demo_x" class="accordian-body collapse"> <!------------ x changes with for loop index ----------->
            <div class="invoice p-3 mb-0">
            <div class="row">
            <div class="col-12">
            </div>
            <!-- /.col -->
            </div>
            <!--------- Some content from DB ------->
            </div>
        </td>
    </tr>
<!------------ Inside For Loop - End -------------------->
</tbody>
</table>

---

您是否在页面上添加了datatable css和脚本？是的。我有。我在其他页面中也使用了datatables，其中仅使用了1个TR，结果与预期一致。请参见页面：“虽然datatables在表的页眉和页脚中支持colspan和rowspan，但它们在表的tbody中不受支持，并且不能出现。”。如果您描述了为什么要在表的body中使用

colspan

，也许我们可以提出一个替代方案。（另外，仅供将来参考，

colspan=“12”

值与第一行中10列的计数不匹配-这并不重要。）如果我不放置colspan，则扩展正好位于上面/父tr的第一列下方。基本上，我尝试使用collapse创建datatable。第一行将包含一些主要数据，而隐藏的下一行将包含次要数据。单击view，第二行将展开。

$('#odata').DataTable({
          "paging": true,
          "lengthChange": true,
          "searching": true,
          "ordering": true,
          "info": true,
          "autoWidth": false,
          "responsive": true
          
      });