如何使用 DataTables (serverSide: true) 实现单个列过滤器?

Posted

技术标签:

【中文标题】如何使用 DataTables (serverSide: true) 实现单个列过滤器?【英文标题】:How do I implement individual column filters with DataTables (serverSide: true)? 【发布时间】:2019-11-22 21:59:32 【问题描述】:

在我的数据表中,搜索列不起作用。因为,我通过单击页码从数据库 10 到 10 为每个带有 ajax 的页面获取数据。我的意思是分页在服务器代码中。 dattable 列搜索服务器端只给我第一页结果。我该怎么做?

这是我的数据表脚本:

$('#table_id').DataTable(
        "order": [[ 3, "desc" ]],
        "destroy": true,
        "dom": "Bfrtip",
        "serverSide": true,
        "processing" : true,
        "searching": false,
        "aoColumnDefs": [
             "bSortable": false, "aTargets": [ 0, 1, 2, 3 , 4] ,
             "bSearchable": false, "aTargets": [ 0, 1, 2, 3, 4 ] 
        ] ,
        "pageLength": 10,
        "ajax" : function (data , callback, settings) 

            $.ajax(
                url: url
                type: 'GET',
                contentType: 'application/json; charset=utf-8',
                data: params: page: data.start / data.length  ,pageSize: data.length,
                    RecordsStart: data.start,
                    PageSize: data.length
                ,
                success: function( data, textStatus, jQxhr )
                    body = data.Data;

                    $('.box-header').on('click', '#addNewRecord' ,function () 
                        e.preventDefault();
                    );
                    callback(
                        // draw: data.draw,
                        data: body,
                        recordsTotal:  data.TotalRecords,
                        recordsFiltered:  data.RecordsFiltered,
                    );
                ,
                error: function( jqXhr, textStatus, errorThrown )
                
            );
        ,
        "columns": [
            
                "title":"Id",
                "class":'id',
                "data": "id"
            ,
            
                "title": "name",
                "class":"name",
                "data": "name"
            ,
            
                "title": "status",
                "class":"status",
                "data": "status"
            
        ]
    );
 $(document).on("keyup","#searchName", function () 
        $name = document.getElementById("searchName").value;
        $.ajax(
            url: url,
            type:"GET",
            data:name:$name,
            success: function (data) 
                //Here I don't know how to add search record 
            
        )

还有php代码:

 public function searchTable(Request $request)

    $keyWord = $request->input('searchName', 'default_value');
    $name = myTable::select('id','name', 'status')
        ->where('name', 'like',  '%' . $keyWord .'%')->get();

    return response()->json([
        'info' => $name,
    ]);


【问题讨论】:

嗨,你可以参考这个网址,它可能对你有用Data table 谢谢,但是我不能在服务器端使用它们。它只是在第一页搜索。 @HaniyeShadman 如何从服务器响应 json?我们可以从检查网络选项卡中查看。 【参考方案1】:

以下代码显示了如何搜索各个列:

$(document).ready(function() 
    // Setup - add a text input to each footer cell
    $('#example tfoot th').each( function () 
        var title = $(this).text();
        $(this).html( '<input type="text" placeholder="Search '+title+'" />' );
     );

    // DataTable
    var table = $('#example').DataTable();

    // Apply the search
    table.columns().every( function () 
        var that = this;
        $( 'input', this.footer() ).on( 'keyup change clear', function () 
            if ( that.search() !== this.value ) 
                that
                    .search( this.value )
                    .draw();
            
         );
     );
 );

如下图:

【讨论】:

以上是关于如何使用 DataTables (serverSide: true) 实现单个列过滤器?的主要内容,如果未能解决你的问题,请参考以下文章

如何在dataTables中将数字数据右对齐

如何使用 DataTables 和 Excel 解决 parseXML 问题?

如何替换 jQuery DataTables 中的数据数组

如何在DataTables 1.10中使用JQuery DataTables“input”插件

如何在 jQuery DataTables 中完全抑制表头?

DataTables.net 如何仅使用自定义代码订购