是否可以在数据表服务器端实现单独的列搜索

Question

在数据表服务器端实现列过滤器时遇到问题。筛选器列出现，但不起作用。我已经看了很多参考资料，如下面的链接，但仍然无法解决我的问题。

https://datatables.net/examples/api/multi_filter.html

https://datatables.net/extensions/fixedcolumns/examples/styling/col_filter.html

jquery数据表服务器端-顶部的筛选器列

这是我迄今为止尝试过的代码。

$('#table tfoot th').each( function (i) {
var title = $('#table thead th').eq( $(this).index() ).text();
$(this).html( '<input type="text" placeholder="Search '+title+'" data-index="'+i+'" />' );
} );

table = $('#table').DataTable({ 
aLengthMenu: [
[15, 25, 50, 100, 200, -1],
[15, 25, 50, 100, 200, "All"]
],
iDisplayLength: 15,
"processing": true, 
"serverSide": true, 
"ordering": false,
"searching": true,
"scrollY": true,
"scrollX": true,
"order": [], 

"ajax": {
"url": "<?php echo site_url('drawing/ajax_list_welding_plan')?>",
"type": "POST",
"data": function ( data ) {
data.drawing_no = $('#drawing_no_table').val();
data.project_no = $('#project_table').val();
data.drawing_title = $('#drawing_title_table').val();
data.document_title = $('#document_title_table').val();
data.client = $('#client_table').val();
}
},
"columnDefs": [
{ 
"targets": [ -1 ], 
"orderable": false, 
},
{ 
"targets": [ -2 ], 
"orderable": false, 
},
{
"targets": [0, 1, 2, 3, 4, 5, 6, 7, 9, 10, 11, 12, 14, 15, 16, 17, 18, 19, 20, 21], // your case first column
"className": "text-center",
"width": "4%"
},
],
});
$( table.table().container() ).on( 'keyup', 'tfoot input', function () {
table
.column( $(this).data('index') )
.search( this.value )
.draw();
} );

Answer 1

是的，您可以使用服务器端处理来实现单独的列过滤。

但是，与全局过滤、排序和分页一样，您需要在服务器上实现逻辑来处理这一问题。

假设您使用的是"serverSide": true，每当您在DataTable中执行操作(如分页、排序或筛选(时，DataTables都会使用DataTablesajax选项中的URL向服务器发送ajax请求。

DataTables会自动为您执行此操作。该请求包含服务器执行排序、筛选和分页所需的所有信息。

例如，这里有一个这样的请求：

{
"draw": "5",
"columns[0][data]": "id",
"columns[0][name]": "",
"columns[0][searchable]": "true",
"columns[0][orderable]": "true",
"columns[0][search][value]": "",
"columns[0][search][regex]": "false",
"columns[1][data]": "name",
"columns[1][name]": "",
"columns[1][searchable]": "true",
"columns[1][orderable]": "true",
"columns[1][search][value]": "",
"columns[1][search][regex]": "false",
"columns[2][data]": "description",
"columns[2][name]": "",
"columns[2][searchable]": "true",
"columns[2][orderable]": "true",
"columns[2][search][value]": "widget",
"columns[2][search][regex]": "false",
"order[0][column]": "1",
"order[0][dir]": "asc",
"start": "30",
"length": "10",
"search[value]": "",
"search[regex]": "false"
}

这个请求要求服务器返回10行数据，从行索引30开始(其中第一行实际上是行索引0(：

"start": "30",
"length": "10",

这表示"；第3页"；表的数据，每页10行。

它要求数据按升序排列在第1列：

"order[0][column]": "1",
"order[0][dir]": "asc",

(显然，您需要先对数据进行排序，然后才能知道需要发送到DataTables的正确10行。(

以下行表示没有全局搜索项：

"search[value]": "",

但接下来的几行表示列索引2(显示的表中的第三列(有一个基于列的搜索项：

"columns[2][search][value]": "widget",
"columns[2][search][regex]": "false",

该列的搜索项是widget-，并且该项将被解释为文字值(而不是正则表达式(。

因此，这就是您的服务器需要用来构建正确的10行集的信息，并将其发送回DataTables：首先，服务器需要对整个数据集进行排序和筛选，然后它需要返回"；第3页"；结果。

通常，列搜索值的请求字段为空。但是，当您将搜索字段添加到DataTable的页脚时，可以填充这些字段。

此处提供了从DataTables发送到服务器的请求文档。你也可以在这里看到回复的文档。

有多种方法可以将单独的列筛选添加到表中(正如您所看到的！(。如果您遵循此示例，则可以增强该示例以使用服务器端处理，并且您将看到正在填充的columns[n][search][value]字段。

我建议您在将该解决方案集成到您的特定环境中之前先执行此操作并使其发挥作用。

您可以使用浏览器的控制台(F12(查看网络XHR请求(和响应(，以验证数据是否正确发送到服务器。

当然，服务器(即PHP代码(有责任捕获和读取服务器上的DataTables请求，然后提供服务器端逻辑以正确使用请求信息。