代码之家 › 专栏 › 技术社区 › AlexW

Jquery-数据表-从使用indexof的下拉筛选器中排除列在第一次命中时停止工作

datatables jquery

AlexW · 技术社区 · 6 年前

我试图排除一些列有一个下拉过滤器添加到他们。我使用IndexOf来尝试完成这项工作,但是它没有排除第5列和第7列,而是排除了第5列中的所有列,因此我的表(例如exlcludes 5、6、7、8)应该只排除第5列和第7列。

这是密码,有人知道怎么回事吗?

谢谢

$(document).ready(function() {
    $('#cve_list').DataTable( {
        "pageLength": 18,
        "order": [[ 3, "desc" ]],
        responsive: false,
        "dom": "<'row'<'col-md-6'l><'col-md-6'Bf>>" +
               "<'row'<'col-sm-12'tr>>" +
               "<'row'<'col-sm-5'i><'col-sm-7'p>>",
        buttons: [
            'copyHtml5',
            'excelHtml5',
        ],
        columnDefs: [
           {
              targets: 6,
              type: 'html'
           },
           {
              targets: 7,
              type: 'html'
           }
        ],
        initComplete: function () {
            var excluded_columns = [5,7];
            this.api().columns().every( function () {
                var column = this;
                alert(column.index())
                if(excluded_columns.indexOf(column.index()) == -1) {
                    alert('adding column ' + column.index())
                    var select = $('<br /><select class="dt-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 ) {
                    if(column.index() == 6){ d = $(d).text(); }
                    if(column.index() == 7){ d = $(d).text(); }
                    select.append( '<option value="'+d+'">'+d+'</option>' )
                });
            });
        },
    });
});

1 回复 | 直到 6 年前

George maccaroo 6 年前

在调试Javascript问题时,不要忘记从基础开始。检查控制台是否有错误。代码中的主要问题在于:

select.append( '<option value="'+d+'">'+d+'</option>' )

select 定义在 if(excluded_columnsâ¦) 封锁。但随后的追加在块之外运行。这意味着当你有一个被排除的列时,它没有被设置,所以你会得到一个javascript错误。

Uncaught TypeError:无法读取未定义的属性“append”

然后停止执行,这就是为什么看起来所有其他列都被“排除”的原因。

有几种方法可以解决这个问题,最简单的方法是检查 选择 已定义。如:

if(select !== undefined) { select.append( '<option value="'+d+'">'+d+'</option>' ) }

但我想知道整个列数据块是否真的属于前一个if块。所以可以这样写:

    initComplete: function () {
        var excluded_columns = [5,7];
        this.api().columns().every( function () {
            var column = this;
            alert(column.index())
            if(excluded_columns.indexOf(column.index()) == -1) {
                alert('adding column ' + column.index())
                var select = $('<br /><select class="dt-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 ) {
                    if(column.index() == 6){ d = $(d).text(); }
                    if(column.index() == 7){ d = $(d).text(); }
                    select.append( '<option value="'+d+'">'+d+'</option>' )
                });
            }
        });
    },

另外,只是一个提示,您有一个列索引7的特殊情况,它永远不会实际运行,因为这是您要排除的列之一。

或许可以在这里寻找一些关于javascript调试的提示: How can I debug my JavaScript code?