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

Question

Image1 2 [ 3

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

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

参考： - 点击这里

Answer 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/