如何在表格上方显示搜索过滤器而不是显示在表格标题下?

How to show search filter above table instead of display under table header?

提问人:ahmed abdelaziz 提问时间:10/29/2023 更新时间:10/29/2023 访问量:26

问:

我从事 asp.net MVC项目。我遇到无法在标题上方显示搜索过滤器的问题

意思是先显示搜索过滤器,然后显示表头,然后显示数据。

所以搜索过滤器将是该显示表之后的第一行,带有标题。

那么我可以做哪些更改来在表格标题上方显示搜索过滤器?

我的代码详细信息

 new DataTable('#dtbl', {
            "dom": 'rtip',
            "order": [[0, 'desc'], [5, 'asc']],
            initComplete: function () {
                $('#dtbl tfoot tr').insertAfter($('#dtbl thead tr'))
                this.api()
                    .columns()
                    .every(function () {
                        let column = this;
                        let title = column.footer().textContent;
                        let input = document.createElement('input');
                        input.placeholder = title;
                        column.footer().replaceChildren(input);
                        input.addEventListener('keyup', () => {
                            if (column.search() !== this.value) {
                                column.search(input.value).draw();
                            }
                        });
                    });
            }
        });

 <table id="dtbl" class="table table-bordered table-hover table-striped" style="width:100%;padding-left:5px;
padding-right:7px;">
        <thead>
            <tr style="background-color: #f2f2f2;">

                <th style="border: 1px solid black;">
                    Request No
                </th>
                <th style="border: 1px solid black;">
                    Employee No
                </th>
                <th style="border: 1px solid black;">
                    Employee Name
                </th>
               

            </tr>
        </thead>

        <tbody>
            @foreach (var item in Model)
            {
                <tr style="background-color: #f2f2f2;">

                    <td style="border: 1px solid black;">
                        @Html.DisplayFor(modelItem => item.RequestNo)
                    </td>
                    <td style="border: 1px solid black;">
                        @Html.DisplayFor(modelItem => item.EmpID)
                    </td>
                    <td style="border: 1px solid black;">
                        @Html.DisplayFor(modelItem => item.EmpName)
                    </td>
                   

                </tr>
            }
        </tbody>
        <tfoot>
                <tr>
                <th>Request No</th>
                <th>Employee No</th>
                <th>Employee Name</th>
            </tr>

            </tfoot>
    </table>

预期结果如下:

show above search header

javascript jquery ajax asp.net-mvc 数据表

评论


答:

0赞 mplungjan 10/29/2023 #1

腾出空间:

 <thead>
    <tr id="searchFiltersRow"></tr>
    <tr style="background-color: #f2f2f2;">
        <th style="border: 1px solid black;">Request No</th>
        <th style="border: 1px solid black;">Employee No</th>
        <th style="border: 1px solid black;">Employee Name</th>
    </tr>
</thead>

并在你的每个

initComplete: function () {
  let $searchFiltersRow = $('#searchFiltersRow');
  this.api().columns().every(function () {

    ....

   $searchFiltersRow.append($('<th>').append(input));
0赞 o q 10/29/2023 #2

这部分代码负责过滤器的放置:

$('#dtbl tfoot tr').insertAfter($('#dtbl thead tr'))

由于询问是将其作为表头的第一行,因此代码应更新为:

$('#dtbl tfoot tr').insertBefore($('#dtbl thead tr'))