Question

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

这适用于常规列。但是我有一些列有下拉的列。

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

有人可以建议一种方法来为这个列王添加过滤器。我使用的是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

从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。

使用dom-select列进行DataTable列过滤

2 个答案: