为什么数据表的搜索选项没有显示？

如何解决为什么数据表的搜索选项没有显示？

我有以下代码。我想在table中使用搜索选项以及分页功能。但这是行不通的。这是我的标头部分中的脚本：

    <script>
    $(document).ready(
            function() {

                function format(rowData) {
                    
                    console.log(rowData);
                    var childTable = '<tr>' + '<td></td>'
                            + '<td>brown,John</td>' + '<td>Staff</td>'
                            + '<td class="dt-right">50</td>'
                            + '<td class="dt-right">$2,500</td>'
                            + '<td class="dt-right">$1,500</td>' + '</tr>'
                            + '<tr>' + '<td></td>' + '<td>Smith,Mary</td>'
                            + '<td>Consultant</td>'
                            + '<td class="dt-right">50</td>'
                            + '<td class="dt-right">$2,000</td>' + '</tr>';
                    return $(childTable).toArray();
                }

                var table = $('#example').DataTable({
                     
                    filter: true,'dom' : 't','columns' : [ {
                        'className' : 'details-control','orderable' : false,'data' : null,'defaultContent' : ''
                    },null,],'columnDefs' : [ {
                        'targets' : [ 0 ],'width' : '10px',},{
                        'targets' : [ 1,2 ],'className' : 'dt-left',{
                        'targets' : [ 3,4,5 ],'className' : 'dt-right','width' : '100px',"pageLength": 10
                });

                // 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);

                            if (row.child.isShown()) {
                                // This row is already open - close it
                                row.child.hide();
                                tr.removeClass('shown');
                            } else {
                                // Open this row
                                row.child(format(row.data())).show();
                                tr.addClass('shown');
                            }
                        });
            });
</script>

这是我的table：

<table id="example" class="display Nowrap" width="100%">
        <thead>
            <tr>
                <th></th>
                <th>Client</th>
                <th>Project</th>
                <th>Hours</th>
                <th>Billed</th>
                <th>Collected</th>
            </tr>
        </thead>

        <tbody>
        
        
        <th:block th:each="element,iterStat  : ${searchResult}">

            <tr >
                <td></td>
                <td th:text="${element.key}"> Name</td>
                <td>1001-01</td>
                <td>100</td>
                <td>$5000</td>
                <td>$2500</td>
            </tr>
            </th:block>
        </tbody>
    </table>

这是我在标题部分添加的内容：

 <link
    href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.css"
    rel="stylesheet" type="text/css" />
 <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.js"></script>

结果显示了一个表格，在其中可以看到元素，如果单击该行，还可以看到嵌套的行。但是搜索框和分页选项未显示。如果有人可以帮助我，我将不胜感激。

解决方法

您正在使用此设置在数据表中隐藏搜索和分页：

'dom' : 't'

如果将其删除，则会显示“搜索和分页”。

不清楚您打算使用什么设置，但是您可以在此处找到文档：

https://datatables.net/reference/option/dom