如何使用 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 和 Excel 解决 parseXML 问题?
如何在DataTables 1.10中使用JQuery DataTables“input”插件