更新时间:2023-12-04 11:35:22
这是我代码中的一个示例-它与使用<input>
和<select>
一起使用,但是如果您尝试尝试,则应该能够非常轻松地对其进行调整做一些不同的事情.
Here's an example from my code -- it's with using <input>
and <select>
, but you should be able to adapt it very easily if you are trying to do something differently.
在datatables.net
提供的示例中,它们使用页脚中的搜索字段(我个人不喜欢)来完成此操作,因此我的示例在页眉中使用它们.对于初学者,您将在<thead>
中需要两行-确保过滤器行是第一行,而实际标题是第二行
In the example provided on datatables.net
, they do it with the search fields in the footer (which I personally dislike), so my example is with them in the header. For starters, you will need two rows in your <thead>
-- make sure your filter row is the first row, and your actual headers is the second row
Working DEMO
<table class="table">
<thead>
<tr class="filter-row">
<th class="actions">
</th>
<th class="searchable datatables-dropdown">
<select name="FormName">
<option>Form1</option>
<option>Form2</option>
</select>
</th>
<th class="display-order">
</th>
<th class="searchable">
Label Text
</th>
<th class="searchable">
View Roles
</th>
<th class="searchable">
Edit Roles
</th>
<th class="searchable">
Delete Roles
</th>
<th class="searchable">
Add Roles
</th>
<th class="searchable">
Field Type
</th>
<th class="searchable">
Note Field
</th>
<th class="searchable">
Note Required
</th>
<th class="searchable">
Default
</th>
<th class="searchable">
Reason List Group
</th>
<th class="searchable">
Reason Required
</th>
</tr>
<tr>
<th class="actions">
Actions
</th>
<th>
Form Name
</th>
<th>
Display Order
</th>
<th>
Label Text
</th>
<th>
View Roles
</th>
<th>
Edit Roles
</th>
<th>
Delete Roles
</th>
<th>
Add Roles
</th>
<th>
Field Type
</th>
<th>
Note Field
</th>
<th>
Note Required
</th>
<th>
Note Default
</th>
<th>
Reason List Group
</th>
<th>
Reason Required
</th>
</tr>
</thead>
<tfoot>
</tfoot>
<tbody>
</tbody>
</table>
然后,在JavaScript中,您可以将过滤器行从纯文本转换为<input>
元素,如下所示:
Then, in your JavaScript, you can convert your filter rows from the plain text to the <input>
elements like so:
$(function () {
// First -- Convert plain text to search field inputs
$('.table thead tr:first th.searchable:not(.datatables-dropdown)').each(function () {
var title = $(this).text().trim();
$(this).css({ "padding": "5px" });
$(this).html('<input type="text" placeholder="Search ' + title + '" style="width: 115px;" />');
});
// Then -- initialize DataTable
var table = $(".table").DataTable({
// ... Initialization options
});
// Lastly -- call function for wiring up the search fields to the table passed in
ApplySearchFieldsToDatatable(table);
});
function ApplySearchFieldsToDatatable (table) {
// https://datatables.net/examples/api/multi_filter.html
table.columns().every(function () {
var column = this,
header = $(column.header()), // returns LAST <tr> in <thead>
// we need to also grab the first <tr> in <thead> because that is where the search boxes are
searchHeader = header.parent().prev(),
// Get the corrisponding <th> in the first <tr> (the filter row)
currentColumn = searchHeader.children(":eq(" + header.index() + ")");
// Unbind existing event listeners on old column position
$('select', currentColumn).off("change");
$('input', currentColumn).off("input").off("propertychange");
// Add new event listeners for new column position
$('select', currentColumn).on('change', function () {
if (column.search() !== this.value) {
column.search(this.value).draw();
}
});
$('input', currentColumn).on('input propertychange', function () {
if (column.search() !== this.value) {
column.search(this.value).draw();
}
});
// Need to set the value of the inputs/selects to the search value saved by "stateSave: true"
// This is needed on page reload when the search state gets saved, but the inputs get redrawn
// from scratch. They do not inherently retain their value, so the data in the table does not
// match the values in the search fields.
if (column.search().length) {
currentColumn.find('input').val(column.search());
currentColumn.find('select').val(column.search());
}
});
}