Question

我正在尝试使用这个： http://www.datatables.net/examples/api/multi_filter_select.html

允许数据表中每列的下拉列表进行搜索。

$(document).ready(function() {
$('#example').DataTable( {
    initComplete: function () {
        this.api().columns().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>' )
            } );
        } );
    }
} );

}）;

然而，我得到了：

Uncaught TypeError: this.api(...).columns(...).every is not a function

并且不知道从哪里开始进行故障排除。

Answer 1

确保添加jQuery版本jquery-1.12.0.min.js和dataTable版本1.10.11，这个问题存在于较低版本的dataTable中，但在dataTable版本1.10.11中它可以正常工作

Answer 2

确保指定您的列索引。下面是一个示例：

 initComplete: function () { // After DataTable initialized 
            this.api().columns([1, 5, 6]).every(function () {
                /* use of [1,2,3] for second, third and fourth column.  Leave blank - columns() - for all.  
                Multiples? Use columns[0,1]) for first and second, e.g. */
                var column = this;
                var select = $('<select><option value=""/></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>')
                });
            }); // this.api function 
        } //initComplete function  

    });
});

数据表多列下拉搜索

2 个答案: