[英]jQuery datatable retain filter parameter after refresh
根据我之前的一些问题,我正在使用数据表。 我能够在表的顶部添加 INPUT 字段,在数据表中进行单独的列搜索。
我现在需要做的是在页面刷新后保留在 INPUT 字段(或多个字段)中输入的参数。
到目前为止,这是我的代码:
// header input filters
$('#example1 .filters th').each(function(){
var title = $('#example1 thead th').eq($(this).index()).text();
$(this).html('<input type="text" placeholder="Search '+title+'" />');
});
// set and print the datatable
var $dataTable = $('#example1').DataTable({
"ajax": 'api/dateset.php',
"iDisplayLength": 25,
"order": [[ 6, "desc" ]],
"scrollY": 580,
"scrollX": true,
"bDestroy": true,
"stateSave": true
});
// Apply the search to columns
$dataTable.columns().eq(0).each(function(colIdx){
$('input', $('.filters th')[colIdx]).on('keyup change', function(){
$dataTable
.column(colIdx)
.search(this.value)
.draw();
});
});
如果您注意到上面我设置 $dataTable 的部分,您应该会看到 "stateSave": true 。 使用它,当页面刷新时,它会保存用户输入的参数搜索,但不会在 INPUT 字段中显示文本。
这就是我被困的地方。
这是一个视觉表示:
刷新前——
刷新后——
正如您在第二张图片中看到的,搜索适用于以 TEST222 开头的 BOOKING,但文本在 BOOKING INPUT 字段中不再可见。
我确实遇到过这篇文章: https : //datatables.net/reference/option/stateSaveCallback
但我不确定如何将该代码实现到我的代码中。 我什至不确定 stateSaveCallback 是否是正确使用的函数。
我终于找到了这篇文章: http : //live.datatables.net/neqozaj/1/edit
利用那篇文章,我能够将这段代码添加到整个函数中:
var state = $dataTable.state.loaded();
if ( state ) {
$dataTable.columns().eq( 0 ).each( function ( colIdx ) {
var colSearch = state.columns[colIdx].search;
if ( colSearch.search ) {
$('input', $('.filters th')[colIdx]).val( colSearch.search );
}
});
$dataTable.draw();
}
使用这个,我能够达到我想要的效果。
如果您有列级过滤器,请尝试以下代码。
// Restore state, search and column level filter
var state = table.state.loaded();
if (state) {
table.columns().eq(0).each(function (colIdx) {
var colSearch = state.columns[colIdx].search;
if (colSearch.search) {
$('input', table.column(colIdx).header()).val(colSearch.search);
}
});
table.draw();
}
// Apply the search
table.columns().eq(0).each(function (colIdx) {
$('input', table.column(colIdx).header()).on('keyup change', function () {
table
.column(colIdx)
.search(this.value)
.draw();
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.