javascript - 使用 dom-select 列过滤 DataTable 列

Question

我正在为我的表使用 Jquery Datatable 并按照此示例过滤数据

DataTables > API > Multi-filter

这对于常规列来说效果很好。但是我有一些带有下拉列表的列，如下所示。

对于此列，过滤不起作用，因为它被认为是用于过滤的下拉列表的所有条目。

有人可以建议一种为这个专栏之王设置过滤器的方法吗？我使用的是 DataTables 版本 1.10.7。

谢谢。

Answer 1

这很有趣:

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 .

希望对您有所帮助!