所以我认为这可能是数据表库中的错误。我能够仅使用他们在 jsfiddle 中的示例代码来重现这一点。
重新创建的步骤:
- 打开 JS Fiddle 链接 https://jsfiddle.net/t4rphnuc/
- 点击“运行”
- 在页脚搜索框(无关紧要)中过滤数据表
- 再次点击“运行”或刷新页面(第2-4步需要做两次,因为JSFiddle第一次不会缓存数据表)
注意:数据表仍保持过滤状态,但搜索字段现在全部为空。
有没有其他人看到这个或看到我在这里做错了什么?
这是javascript
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.dataTables.js" type="text/javascript"></script>
<script src='https://code.jquery.com/jquery-1.12.4.js'></script>
<script src='https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js' type="text/javascript"></script>
<script src='https://cdn.datatables.net/select/1.2.5/js/dataTables.select.min.js' type="text/javascript"></script>
<script src='https://cdn.datatables.net/buttons/1.5.1/js/dataTables.buttons.min.js' type="text/javascript"></script>
<script src='https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js' type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
const table = $('#example').DataTable({
stateSave: true
});
// 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+'" />' );
} );
// Apply the search
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://datatables.net/examples/api/multi_filter.html
预期的功能是数据表应在加载之间保存状态,搜索框应在页面重新加载时重新加载过滤后的文本。
最佳答案
这是因为您启用了 stateSave
。这将按原样执行列搜索,这是 DataTables 的内部内容,但是因为您的输入元素是外部的并且 DataTables 不知道它们,所以您必须自己填充这些元素。看看this例如,它在 initComplete
中执行:
// Restore state saved values
var state = this.state.loaded();
if (state) {
var val = state.columns[this.index()];
input.val(val.search.search);
}
关于javascript - 刷新后数据表搜索为空,但过滤器处于事件状态,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49878160/