代码之家 › 专栏 › 技术社区 › DotNetRussell

刷新后数据表搜索为空,但筛选器处于活动状态

datatables jquery javascript

DotNetRussell · 技术社区 · 7 年前

所以我认为这可能是数据表库中的一个bug。我能够在JSFIDLE中使用他们的示例代码来重现这一点。

重新创建的步骤:

打开JS Fiddle链接 https://jsfiddle.net/t4rphnuc/
单击“运行”
在页脚搜索框中(无论哪个)过滤数据表
再次单击“运行”或刷新页面(您需要执行两次步骤2-4,因为JSFIDLE第一次不会缓存数据表)

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

有没有其他人看到我在这里做错了什么?

这是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

预期的功能是,数据表应在加载之间保存状态,搜索框应在页面重新加载时重新加载筛选的文本。

2 回复 | 直到 7 年前

colin0117 7 年前

因为你有 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);
    }

DotNetRussell 7 年前

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

        $(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)

然后,从上面的答案中窃取,通过索引从列中注入搜索值

$(此)。html(“<input type=“text”placeholder=“Search”+title+”value=“”+table.column(index).Search()+“/>”);