我正在使用 Jquery Datatable 作为我的表,并按照这个示例来过滤数据
DataTables > API > Multi-filter
这对于常规列来说效果很好。但我有一些带有下拉列表的列,如下所示。
对于此列,过滤不起作用,因为它被视为要过滤的下拉列表的所有条目。
有人可以建议一种为这个专栏之王设置过滤器的方法吗? 我使用的是 DataTables 版本 1.10.7。
谢谢。
最佳答案
这很有趣:
const table = $('#example').DataTable({
initComplete: function () {
this.api().columns().eq(0).each( function (index) {
const column = this.column(index);
const title = $(column.header()).text();
if(index === 2){
var select = $(`
<select class="form-control">
<option value="">Please choose</option>
</select>
`)
.appendTo( $(column.footer()).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>' )
});
}else{
var input = $(`
<input class="form-control" type="text" placeholder="Search ${title}" />
`)
.appendTo( $(column.footer()).empty() )
.on( 'keyup change', function () {
var val = $.fn.dataTable.util.escapeRegex($(this).val());
column
.search( val )
.draw();
});
}
});
}
});
工作 JSFiddle here .
经Mr. Polywhirl修正后(谢谢!)我重新审视了这个问题并改编了以前的答案:
(function() {
$.fn.dataTable.ext.type.search.selected = (data) => !$(data).is("select")
? ''
: $(data).val();
$.fn.dataTable.ext.order['dom-select'] = function(settings, col) {
return this.api().column(col, {
order: 'index'
}).nodes().map(td => $('select', td).val());
}
})();
var table = $('#example').DataTable({
"columnDefs": [{
"orderDataType": "dom-select",
"type": "selected",
"targets": 2
}]
});
$("#example select").on("change", function() {
var $this = $(this),
val = $this.val(),
cellPosition = table.cell($this.parents("td")).index(),
rowDate = table.row(cellPosition.row).data();
$this.find("option").each((k, v) => ($(v).val() === val)
? $(v).attr("selected", "selected")
: $(v).removeAttr("selected"));
rowDate[cellPosition.column] = $this.prop("outerHTML");
table.row(cellPosition.row).data(rowDate);
table.cell(cellPosition).invalidate().draw();
});
另一个工作示例 here .
希望有帮助!
关于javascript - 使用 dom-select 列过滤 DataTable 列,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49897648/