我在DataTables.net中有这个小代码负责显示Table。
<script>
$(document).ready(function () {
// Setup - add a text input to each header cell
$('#DT-GRvWJTAH thead th').each(function () {
var title = $(this).text();
$(this).html('<input type="text" placeholder="' + title + '" />');
});
// Setup - add a text input to each footer cell
$('#DT-GRvWJTAH tfoot th').each(function () {
var title = $(this).text();
$(this).html('<input type="text" placeholder="' + title + '" />');
});
// Table code
var table = $('#DT-GRvWJTAH').DataTable({
"dom": "Bfrtip",
"buttons": [
"copyHtml5",
"excelHtml5",
"csvHtml5",
"pdfHtml5"
],
"colReorder": true,
"paging": true,
"scrollCollapse": false,
"pagingType": [
"full_numbers"
],
"lengthMenu": [
[
15,
25,
50,
100
],
-1,
[
15,
25,
50,
100
],
"All"
],
"ordering": true,
"order": [
],
"info": true,
"procesing": true,
"responsive": {
"details": true
},
"select": true,
"searching": true,
"stateSave": true
});
// Apply the search for header cells
table.columns().eq(0).each(function (colIdx) {
$('input', table.column(colIdx).header()).on('keyup change', function () {
table
.column(colIdx)
.search(this.value)
.draw();
});
$('input', table.column(colIdx).header()).on('click', function (e) {
e.stopPropagation();
});
});
// Apply the search for footer cells
table.columns().every(function () {
var that = this;
$('input', this.footer()).on('keyup change', function () {
if (that.search() !== this.value) {
that.search(this.value).draw();
}
});
});
});
</script>
完整代码:https://codepen.io/przemyslawklys/pen/jRxLRy
这是一个启用过滤的简单表。问题是,当您筛选某些列并按F5刷新输入字段中的值时,将删除,但过滤保持打开状态。如果您进入该过滤器并按退格键,它将再次开始工作。价值在那里,只是看不见。
现在在我的Chrome Canary中,它没有这个问题,但我可以在其他浏览器中看到它。当代码在代码笔中托管时,我甚至可以看到它与Chrome相同,所以它显然就在那里。
我该如何解决这个问题?我看到两个选项:
但是在我的例子中我能做到这一点吗?我试着玩它但没有取得真正的成功。
这是因为你有
"stateSave": true
您的列过滤与所有其他设置一起保存,很可能是在localStorage中,当您按F5时,将恢复以前的状态。但是你没有任何使用saveState
搜索条件填充输入的代码..!因此,您将获得带有空输入框的过滤数据。
您可以通过多种方式获取/设置saveState
属性;一个事件处理程序将使用上面的代码,但你应该考虑更多的思考:
$('#DT-GRvWJTAH').on('stateLoaded.dt', function(e, settings, data) {
settings.aoPreSearchCols.forEach(function(col, index) {
if (col.sSearch) setTimeout(function() {
$('#DT-GRvWJTAH thead th:eq('+index+') input').val(col.sSearch)
}, 50)
})
})
查看stateSaveParams
/ stateLoadParams
,您可以在其中设置/获取列输入的状态。