刷新后数据表搜索为空，但过滤器处于活动状态(Data Table Search is Empty After Refresh but Filter is Active)

 所以我认为这可能是数据表lib中的一个错误。 我只能使用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 
 
 预期的功能是数据表应该在加载之间保存状态，并且搜索框应该在页面重新加载时重新加载过滤的文本。 

So I think this might be a bug in the data tables lib. I was able to reproduce this using just their example code in jsfiddle.
 
Steps to recreate:
 
 
 
Open JS Fiddle link https://jsfiddle.net/t4rphnuc/
 
 
Click "Run"
 
 
In a footer search box (doesn't matter which) filter the data table
 
 
Click "Run" again or refresh the page (you'll need to do steps 2-4 twice because JSFiddle doesn't cache the data table the first time) 
 
 
NOTE: The Data table still remains filtered but the search fields are now all empty. 
 
Has anyone else seen this or see something I'm doing wrong here? 
 
This is the 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>
 
Most of the code was taken from this link https://datatables.net/examples/api/multi_filter.html 
 
The expected functionality is that the data table should save state between loads and the search boxes should reload the filtered text when the page reloads. 

原文：https://stackoverflow.com/questions/49878160