数据表列过滤在服务器端不起作用答案

【问题标题】：Datatable column filtering not working server side数据表列过滤在服务器端不起作用
【发布时间】：2019-10-22 05:27:50
【问题描述】：

我已经在数据表中完成了服务器端处理。现在我也想做单独的列过滤服务器端处理。

我试过了。

 $('#example thead th').each(function () {
     var title = $(this).text();
     $(this).html(title+' <input type="text" class="col-search-input" placeholder="Search ' + title + '" />');
});
var table = $('#example').DataTable({
        dom: 'lfBrtip',
        "processing":true,
        "serverSide":true,
        "ajax":{
            "url":"{{route('homeajax')}}",
            "dataType": "json",
            "type": "POST",
        },
        "columns":[
            {"data":"name"},
            {"data":"Position"},
            {"data":"office"},
            {"data":"age"},
            {"data":"start_date"},
            {"data":"salary"},
        ],
        initComplete: function(){
            this.api().columns().every(function(){
                $('input', this.header()).on('keyup change', function () {
                    if (table.search() !== this.value) {
                        table.search(this.value,true).draw();
                    }
                });
            });
        },
        paginate: true,   
    });

它仅适用于一列，但是当我尝试从另一个字段搜索时它不起作用。

当我尝试从另一列输入时，它会显示所有数据，

【问题讨论】：

标签： jquery laravel datatables

【解决方案1】：

这取决于您用于获取数据的服务器端查询。如果加入您的查询，那么您需要像下面的代码一样传递列名。

"columns":[
        {"data":"name"},
        {"data":"tbl.Position"}, //tbl is join table alias.
        {"data":"office"},
        {"data":"age"},
        {"data":"start_date"},
        {"data":"salary"},
    ],

【讨论】：

【解决方案2】：

我知道这会稍微扰乱您的设计，但您可以让 DataTables 创建搜索输入吗？这样，它可以将事件侦听器设置为仅搜索该列。我使用此链接中的代码变体：

http://live.datatables.net/tobekuxu/1/edit

要查看的另一件事（也许先试试这个）是我认为当您只想搜索该列时，您正在搜索整个表。在你的 columns().every() 函数中尝试这样的事情：

this.api().columns().every(function(){
    let column = this;
    $('input', this.header()).on('keyup change', function () {
        if (column.search() !== this.value) {
            column.search(this.value,true).draw();
        }
    });
});

【讨论】：

【解决方案3】：

也许这个 ajax 代码会对你有所帮助。 aoColumns 如果您只需要启用过滤器名称、位置和开始日期（自定义过滤器）

 "aoColumns": [
        { "bSortable": true },
        { "bSortable": true },
        { "bSortable": false },
        { "bSortable": false },
        { "bSortable": true },
        { "bSortable": false }
    ]

【讨论】：