使用 dom-select 列过滤 DataTable 列

Question

我正在为我的 table 使用 Jquery 数据 table 并按照此示例

过滤数据

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。

希望对您有所帮助！

Answer 2

从中找到答案。

要编写我们自己的过滤函数，我们必须扩展Datatable.The 函数的$.fn.dataTable.ext.search 函数有5 个参数，您需要第四个参数（行的原始数据源）。第四个参数是一个JavaScript数组，其中可以找到给定行的给定列的原始HTML代码。

$.fn.dataTable.ext.search.push(
    function( settings, data, dataIndex,original,counter ) {
        var filterValue = $('#filterField').val();

      var valueToFilter6 = original[6]; // this is the column with select box
      if( valueToFilter6.indexOf('value="' + filterValue) != -1){
            return true;
      }
      return false;
    }
);

可以找到完整的工作示例 fiddle here。

使用 dom-select 列过滤 DataTable 列

DataTable column filtering with dom-select column

javascript

jquery

datatables

datatables-1.10