Javascript jQuery Datatables下拉列表仅适用于某些列

使用这段代码和我看到的所有示例，我可以向所有列添加下拉列表，如图所示：

var-table=$（'#myTable'）.DataTable({
dom:'lfBrtip'，
initComplete:函数（）{
this.api（）.columns（）.every（函数（）{
var列=此；
变量选择=$（“”）
.appendTo（$（column.header（）））
.on（'change'，function（）{
var val=$.fn.dataTable.util.escapeRegex(
$（this.val（）
);
柱
.search（val？“^”+val+“$”：“”，true，false）
.draw（）；
} );
column.data（）.unique（）.sort（）.each（函数（d，j）{
选择。追加（“”+d+“”）
} );
} );
.......
}

---

例如，如何仅为第2列和第3列添加下拉列表？您应该使用

每个
来获取要设置下拉列表的列的索引

var table = $('#myTable').DataTable({
        dom: 'lfBrtip',

        initComplete: function () {
        var api = this.api();
         this.api().columns().eq(0).each( function ( index ) {
           if(index == 1 || index == 2)
           {
            var column = this;
            var select = $('<select><option value=""></option></select>')
                .appendTo( $(api.column(index).header()))
                .on( 'change', function () {
                    var val = $.fn.dataTable.util.escapeRegex(
                        $(this).val()
                    );

                    column
                        .search( val ? '^'+val+'$' : '', true, false )
                        .draw();
                } );
              var i = 0;
              api.column(index).data().unique().sort().each( function ( d, j ) {
                select.append( '<option value="'+d+'">'+d+'</option>' );
              } );
           }
        } );
.......
    }

var-table=$（'#myTable'）.DataTable({
dom:'lfBrtip'，
initComplete:函数（）{
var api=this.api（）；
this.api（）.columns（）.eq（0）.each（函数（索引）{
如果（索引=1 | |索引=2）
{
var列=此；
变量选择=$（“”）
.appendTo（$（api.column（index.header（）））
.on（'change'，function（）{
var val=$.fn.dataTable.util.escapeRegex(
$（this.val（）
);
柱
.search（val？“^”+val+“$”：“”，true，false）
.draw（）；
} );
var i=0；
api.column（index.data（）.unique（）.sort（）.each（函数d，j）{
select.append（“”+d+“”）；
} );
}
} );
.......
}
您应该使用
每个
来获取要设置下拉列表的列的索引

var table = $('#myTable').DataTable({
        dom: 'lfBrtip',

        initComplete: function () {
        var api = this.api();
         this.api().columns().eq(0).each( function ( index ) {
           if(index == 1 || index == 2)
           {
            var column = this;
            var select = $('<select><option value=""></option></select>')
                .appendTo( $(api.column(index).header()))
                .on( 'change', function () {
                    var val = $.fn.dataTable.util.escapeRegex(
                        $(this).val()
                    );

                    column
                        .search( val ? '^'+val+'$' : '', true, false )
                        .draw();
                } );
              var i = 0;
              api.column(index).data().unique().sort().each( function ( d, j ) {
                select.append( '<option value="'+d+'">'+d+'</option>' );
              } );
           }
        } );
.......
    }

var-table=$（'#myTable'）.DataTable({
dom:'lfBrtip'，
initComplete:函数（）{
var api=this.api（）；
this.api（）.columns（）.eq（0）.each（函数（索引）{
如果（索引=1 | |索引=2）
{
var列=此；
变量选择=$（“”）
.appendTo（$（api.column（index.header（）））
.on（'change'，function（）{
var val=$.fn.dataTable.util.escapeRegex(
$（this.val（）
);
柱
.search（val？“^”+val+“$”：“”，true，false）
.draw（）；
} );
var i=0；
api.column（index.data（）.unique（）.sort（）.each（函数d，j）{
select.append（“”+d+“”）；
} );
}
} );
.......
}
您只需添加以下两行

var table = $('#myTable').DataTable({
    dom: 'lfBrtip',

    initComplete: function () {
    this.api().columns().every( function () {
        if(this[0] == 2 || this[0] == 3){//add
        var column = this;
        var select = $('<select><option value=""></option></select>')
            .appendTo( $(column.header()))
            .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>' )
        } );
    } // add
    } );
    // ...
}

var-table=$（'#myTable'）.DataTable({
dom:'lfBrtip'，
initComplete:函数（）{
this.api（）.columns（）.every（函数（）{
如果（this[0]==2 | | this[0]==3）{//add
var列=此；
变量选择=$（“”）
.appendTo（$（column.header（）））
.on（'change'，function（）{
var val=$.fn.dataTable.util.escapeRegex(
$（this.val（）
);
柱
.search（val？“^”+val+“$”：“”，true，false）
.draw（）；
} );
column.data（）.unique（）.sort（）.each（函数（d，j）{
选择。追加（“”+d+“”）
} );
}//添加
} );
// ...
}
您只需添加以下两行

var table = $('#myTable').DataTable({
    dom: 'lfBrtip',

    initComplete: function () {
    this.api().columns().every( function () {
        if(this[0] == 2 || this[0] == 3){//add
        var column = this;
        var select = $('<select><option value=""></option></select>')
            .appendTo( $(column.header()))
            .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>' )
        } );
    } // add
    } );
    // ...
}

var-table=$（'#myTable'）.DataTable({
dom:'lfBrtip'，
initComplete:函数（）{
this.api（）.columns（）.every（函数（）{
如果（this[0]==2 | | this[0]==3）{//add
var列=此；
变量选择=$（“”）
.appendTo（$（column.header（）））
.on（'change'，function（）{
var val=$.fn.dataTable.util.escapeRegex(
$（this.val（）
);
柱
.search（val？“^”+val+“$”：“”，true，false）
.draw（）；
} );
column.data（）.unique（）.sort（）.each（函数（d，j）{
选择。追加（“”+d+“”）
} );
}//添加
} );
// ...
}
编辑器没有抱怨，但在控制台中我得到了
列。标题不是一个函数。我不知道为什么。我已经更改了标题。它有点工作，但现在我在下拉列表中有奇怪的数据；看你的图像需要许可哦，抱歉！现在修复了。编辑器没有抱怨，但在控制台中我得到
列。标题不是一个有趣的东西Action
。我不知道为什么。我已经更改了headerIt，但现在我的下拉列表中有奇怪的数据；请看您的图像需要权限哦，抱歉！现在已修复。