提问人:ahmed abdelaziz 提问时间:10/29/2023 更新时间:10/29/2023 访问量:26
如何在表格上方显示搜索过滤器而不是显示在表格标题下?
How to show search filter above table instead of display under table header?
问:
我从事 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>
预期结果如下:
答:
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'))
评论