在固定标题的DataTable中添加多选过滤器,可以通过以下步骤实现:
<table id="myTable">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
</thead>
<tbody>
<!-- 表格数据行 -->
</tbody>
</table>
$(document).ready(function() {
$('#myTable').DataTable({
initComplete: function() {
this.api().columns().every(function() {
var column = this;
var select = $('<select><option value=""></option></select>')
.appendTo($(column.header()).empty())
.on('change', function() {
var val = $.fn.dataTable.util.escapeRegex(
$(this).val()
);
column
.search(val ? '^' + val + '$' : '', true, false)
.draw();
});
column.data().unique().sort().each(function(d, j) {
select.append('<option value="' + d + '">' + d + '</option>');
});
});
}
});
});
以上是在固定标题的DataTable中添加多选过滤器的方法。这样可以方便用户根据特定列的值进行筛选和过滤,提高数据的可视化和交互性。
腾讯云相关产品和产品介绍链接地址:
领取专属 10元无门槛券
手把手带您无忧上云