如何使用 Datatable jquery 在同一个表中搜索单个列（文本输入，选择下拉列表）？答案

【问题标题】：How to search Individual column (text inputs,select drop-down) in a same table using Datatable jquery?如何使用 Datatable jquery 在同一个表中搜索单个列（文本输入，选择下拉列表）？
【发布时间】：2016-06-01 06:39:58
【问题描述】：

Image1 2 [3

我想将（输入类型）替换成（选择下拉），我该怎么办？

我必须将黑色方块更改为数据表中的下拉菜单

参考：-Click Here

【问题讨论】：

标签： javascript jquery datatable bootstrapping

【解决方案1】：

您好，我试图为这个问题制定一个解决方案，看看，

var table = $('#example').DataTable();

// Apply the search in normal text input way
table.columns().every( function () {
    var that = this;

    $( 'input', this.footer() ).on( 'keyup change', function () {
        if ( that.search() !== this.value ) {
            that
                .search( this.value )
                .draw();
        }
    } );
} );

使用选择输入过滤第 2 列，该列将被替换为您选择的列

 table.column(2).every( function () {

    var column = this;
    var select = $('<select><option value=""></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>')
    });

});

还创建了一个小提琴让我知道是否符合您的要求。 https://jsfiddle.net/daddzt6n/2/

【讨论】：

只是想说这很有帮助！