Question

所以我认为这可能是数据表lib中的一个错误。我只能使用jsfiddle中的示例代码重现这一点。

重新创建的步骤：

打开JS小提琴链接https://jsfiddle.net/t4rphnuc/
点击“运行”
在页脚搜索框中（无关紧要）过滤数据表
再次单击“运行”或刷新页面（您需要执行两次步骤2-4，因为JSFiddle不会第一次缓存数据表）

注意：数据表仍然保持过滤状态，但搜索字段现在全部为空。

有没有其他人看过这个或看到我在这里做错了什么？

这是javascript

[InitializeOnLoad]

大部分代码都来自此链接 https://datatables.net/examples/api/multi_filter.html

预期的功能是数据表应该在加载之间保存状态，搜索框应该在页面重新加载时重新加载过滤后的文本。

Answer 1

这是因为您已启用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);
    }

Answer 2

因此，结合我的代码和上面的答案，我提出了这个解决方案

        $(document).ready(function() {
            const table = $('#example').DataTable({
                stateSave: true
            });

            // Setup - add a text input to each footer cell
            $('#example tfoot th').each( function (index,value) {
                var title = $(this).text();
                $(this).html( '<input type="text" placeholder="Search '+title+'" value="'+table.column(index).search()+'"/>' );
            } );


            // 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();
                    }
                } );
            });
        });

这里的主要代码是修复

$(this).html( '<input type="text" placeholder="Search '+title+'" value="'+table.column(index).search()+'"/>' );

首先获取索引值对，同时迭代列

$('#example tfoot th').each( function (index,value)

然后，从上面的答案中窃取，按索引

从列中注入搜索值

$(this).html( '<input type="text" placeholder="Search '+title+'" value="'+table.column(index).search()+'"/>' );

刷新后数据表搜索为空，但过滤器处于活动状态

2 个答案: