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

2lpgd968 于 2023-08-04 发布在 jQuery

关注(0)|答案(3)|浏览(87)

所以我认为这可能是数据表库中的一个错误。我能够在jsfiddle中使用他们的示例代码重现这一点。
重建步骤：
1.开放JS Fiddle link https://jsfiddle.net/t4rphnuc/
1.点击“运行”
1.在页脚搜索框（无论哪个）中筛选数据表
1.再次单击“Run”或刷新页面（您需要执行两次步骤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

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

jquery

来源：https://stackoverflow.com/questions/49878160/data-table-search-is-empty-after-refresh-but-filter-is-active

3条答案

按热度按时间

5vf7fwbs1#

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

字符串

赞(0）回复(0）举报 2023-08-04

llew8vvj2#

所以结合我的代码和上面的答案我得出了这个解决方案

$(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()+'"/>' );

型

赞(0）回复(0）举报 2023-08-04

e5nszbig3#

上面提到的答案都不起作用。所以我发布了有效的解决方案。

initComplete: function () {
                                                
                                            this.api()
                                                .columns()
                                                .every(function () {
                                                    let column = this;
                                                    let title = column.footer().textContent;
                                     
                                                    // Create input element
                                                    let input = document.createElement('input');
                                                    input.placeholder = title;
                                                    input.value = column.search();
                                                    input.style.width = '100%';
                                                    column.footer().replaceChildren(input);
                                     
                                                    // Event listener for user input
                                                    input.addEventListener('keyup', () => {
                                                        if (column.search() !== this.value) {
                                                            column.search(input.value).draw();
                                                        }
                                                    });
                                                });
                                        },

字符串
input.value = column.search（）;应在创建输入字段时使用。这将从保存的状态填充正确的值。

赞(0）回复(0）举报 2023-08-04

我来回答

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

3条答案

相关问题

热门标签

最新问答