如何将DataTables搜索过滤器显示在表格表头上方？

开发ASP.NET MVC项目时，遇到DataTables搜索过滤器无法显示在表格表头上方的问题。需求是搜索过滤器作为第一行显示，下方依次是表格表头和数据。当前使用的代码如下，需修改实现该效果：

当前JavaScript代码 #

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();
                    }
                });
            });
    }
});

当前HTML代码 #

<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>

预期效果：搜索过滤器行位于表格表头上方，每个过滤器输入框与对应列对齐。

只需修改JavaScript代码中的两个关键点，即可实现需求：

1. 调整过滤器行的插入位置
   将原代码中$('#dtbl tfoot tr').insertAfter($('#dtbl thead tr'))改为$('#dtbl tfoot tr').insertBefore($('#dtbl thead tr'))，把tfoot的过滤器行移至thead表头行的上方。

2. 优化输入框样式（可选但推荐）
   给生成的输入框添加width: 100%样式，确保输入框占满单元格宽度，与表头列完美对齐。

修改后的JavaScript代码 #

new DataTable('#dtbl', {
    "dom": 'rtip',
    "order": [[0, 'desc'], [5, 'asc']],
    initComplete: function () {
        // 将tfoot行移至thead行上方
        $('#dtbl tfoot tr').insertBefore($('#dtbl thead tr'))
        this.api()
            .columns()
            .every(function () {
                let column = this;
                let title = column.footer().textContent;
                let input = document.createElement('input');
                input.placeholder = title;
                // 添加样式让输入框占满单元格
                input.style.width = '100%';
                input.style.boxSizing = 'border-box';
                column.footer().replaceChildren(input);
                input.addEventListener('keyup', () => {
                    if (column.search() !== input.value) {
                        column.search(input.value).draw();
                    }
                });
            });
    }
});

说明 #

• 原代码是将tfoot的过滤器行插入到表头行之后，修改后改为插入到表头行之前，直接实现了过滤器在表头上方的布局。
• 添加输入框的宽度样式是为了让过滤器的输入框与下方表头列的宽度完全匹配，提升视觉一致性。
• 保留原有的搜索逻辑，确保输入内容能正常触发列搜索并刷新表格数据。

内容的提问来源于stack exchange，提问作者ahmed abdelaziz