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

Question

Image1 2 [3

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

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

参考： - Click Here

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/