使用 dom-select 列过滤 DataTable 列答案

【问题标题】：DataTable column filtering with dom-select column使用 dom-select 列过滤 DataTable 列
【发布时间】：2018-04-18 10:40:38
【问题描述】：

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

DataTables > API > Multi-filter

这适用于常规列。但我有一些带有下拉列表的列，如下所示。

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

有人可以建议一种方法来为这个列之王设置过滤器。我正在使用 DataTables 版本 1.10.7。

谢谢。

【问题讨论】：

您是否将 DataTables 应用于带有下拉列表的现有表格？还是你在使用插件？
@Mr.Polywhirl 我正在为现有表应用数据表。我首先创建 html 表并应用“var table = $('#example').DataTable();”
我相信这可能是another question的副本，但它没有一个可靠的解决方案，只是对自定义搜索的建议。我宁愿 RENDER the dropdowns 以便该值是单数，而不是在您的情况下连接的所有值。

标签： javascript jquery datatables datatables-1.10

【解决方案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。

希望有帮助！

【讨论】：

我将您的示例转换为jQuery / DataTables plugin。我不确定它是否符合他们的标准。
我不确定 OP 是否希望底部的过滤器成为下拉列表。我认为问题在于表格包含带有下拉列表的单元格，并且过滤和搜索需要在单元格下拉值上。
你说得很对@Mr.Polywhirl，因为我没有正确阅读问题！当我有 5 分钟的空闲时间时，我会解决真正的问题 ;-)
感谢@annoyingmouse 和 Mr.Polywhirl。我已使用此stackoverflow.com/questions/41040724/… 解决了他的问题，我将添加我的答案作为单独的答案。

【解决方案2】：

从这个question找到答案。

要编写我们自己的过滤函数，我们必须扩展Datatable的$.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;
    }
);

可以在here 找到完整的工作示例小提琴。

【讨论】：