Question

我已经安装了数据表，并为示例提供了激活脚本，但我希望将列过滤器添加到我的数据表中，但似乎无法激活表并添加过滤并给出错误。

是否可以调整以下代码以向每列添加过滤并使其起作用？

$(document).ready(function() {
    $('#example').DataTable( {
        "processing": true,
        "serverSide": true,
        "ajax": "ssp.php", 
    } );
} );    
$(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>' )
                    } );
                } );
            }
        } );
    } );

Answer 1

您使用$('#example').DataTable({})初始化您的表两次，但只应该执行一次因此错误。

同样，对于服务器端处理"serverSide": true，并非所有列值都将立即可用，只有当前页面。因此你需要做任何一个

切换到客户端处理模式。将两个$('#example').DataTable({})次调用合并为一个后，您的代码就可以了。
通过Ajax从服务器检索所有可能的值并填充下拉框。这需要更多的前端和后端代码，您需要在initComplete处理程序中丢弃代码。

数据表 - 向现有脚本添加过滤功能

1 个答案: