为啥数据表的搜索选项不显示？ [关闭]

Posted 2023-05-09

【中文标题】为啥数据表的搜索选项不显示？ [关闭]

【英文标题】：Why is the search option of the datatable not showing? [closed]为什么数据表的搜索选项不显示？ [关闭]

【发布时间】：2021-01-07 18:56:53

【问题描述】：

我有以下代码。我想在我的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,500</td>'
                            + '<td class="dt-right">$1,000</td>' + '</tr>';
                    return $(childTable).toArray();
                

                var table = $('#example').DataTable(
                     
                    filter: true,

                    'dom' : 't',
                    'columns' : [ 
                        'className' : 'details-control',
                        'orderable' : false,
                        'data' : null,
                        'defaultContent' : ''
                    , null, null, null, 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" >
        <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>

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

【参考方案1】：

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

'dom' : 't'

如果你删除它，搜索和分页就会出现。

不清楚您对设置的意图是什么，但您可以在此处找到文档：

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