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

Question

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

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

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

jquery datatables server side - filter column on top

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

$('#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 都会使用DataTables ajax 选项中的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（显示表中的第 3 列）有一个基于列的搜索词：

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

该列的搜索词是 widget - 该词将被解释为文字值（不是正则表达式）。

这就是您的服务器需要使用的信息来构建正确的 10 行集，并将其发送回 DataTables：首先，服务器需要对整个数据集进行排序和过滤 - 然后它需要返回 10结果的“第 3 页”所需的行。

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

从 DataTables 发送到服务器的请求的文档是 here。您也可以在此处查看回复文档。

有多种方法可以将单个列过滤添加到表中（如您所见！）。如果您关注 this example，则可以增强示例以使用服务器端处理 - 您将看到 columns[n][search][value] 字段正在填充。

我建议您在将该解决方案集成到您的特定环境之前执行此操作并使其正常工作。

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

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