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

【问题标题】：Datatables - adding filter function to existing script数据表 - 向现有脚本添加过滤功能
【发布时间】：2017-04-04 04:57:49
【问题描述】：

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

有什么方法可以调整下面的代码，为每一列添加过滤功能并使其正常工作？

$(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>' )
                    } );
                } );
            }
        } );
    } );

【问题讨论】：

标签： jquery database datatables filtering

【解决方案1】：

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

同样使用服务器端处理"serverSide": true 并非所有列值都会立即可用，只有当前页面。因此，您需要这样做

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

【讨论】：