使用 DataTables 时，某些浏览器中的输入字段在刷新时不清除

Question

我在 DataTables.net 中有这段小代码负责显示 Table。

    <script>
        $(document).ready(function () {
            // Setup - add a text input to each header cell
            $('#DT-GRvWJTAH thead th').each(function () {
                var title = $(this).text();
                $(this).html('<input type="text" placeholder="' + title + '" />');
            });
            // Setup - add a text input to each footer cell
            $('#DT-GRvWJTAH tfoot th').each(function () {
                var title = $(this).text();
                $(this).html('<input type="text" placeholder="' + title + '" />');
            });
            //  Table code
            var table = $('#DT-GRvWJTAH').DataTable({
                "dom": "Bfrtip",
                "buttons": [
                    "copyHtml5",
                    "excelHtml5",
                    "csvHtml5",
                    "pdfHtml5"
                ],
                "colReorder": true,
                "paging": true,
                "scrollCollapse": false,
                "pagingType": [
                    "full_numbers"
                ],
                "lengthMenu": [
                    [
                        15,
                        25,
                        50,
                        100
                    ],
                    -1,
                    [
                        15,
                        25,
                        50,
                        100
                    ],
                    "All"
                ],
                "ordering": true,
                "order": [

                ],
                "info": true,
                "procesing": true,
                "responsive": {
                    "details": true
                },
                "select": true,
                "searching": true,
                "stateSave": true
            });
            // Apply the search for header cells
            table.columns().eq(0).each(function (colIdx) {
                $('input', table.column(colIdx).header()).on('keyup change', function () {
                    table
                        .column(colIdx)
                        .search(this.value)
                        .draw();
                });

                $('input', table.column(colIdx).header()).on('click', function (e) {
                    e.stopPropagation();
                });
            });
            // Apply the search for footer cells
            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://codepen.io/przemyslawklys/pen/jRxLRy

这是一个简单的 table，启用了过滤功能。问题是当您过滤某些列并按 F5 刷新输入字段中的值被删除时，但过滤仍然存在。如果您进入该过滤器并按退格键，它将再次开始工作。价值就在那里，只是看不见。

现在在我的 Chrome Canary 中，它没有这个问题，但我可以在其他浏览器中看到它。当代码托管在代码笔中时，我什至可以看到相同的 Chrome，所以它显然在那里。

我该如何解决这个问题？我看到 2 个选项：

使过滤器正确显示，以便用户知道
删除刷新时的所有过滤器

但是在我的示例中我如何才能做到这一点？我试着玩它，但没有真正成功。

Answer 1

这是因为你有

"stateSave": true

您的列筛选与所有其他设置一起保存，很可能在 localStorage 中，当您按 F5 键时，将恢复以前的状态。但是您没有任何代码用 saveState 搜索词填充输入..！因此，您将获得带有空输入框的过滤数据。

您可以通过多种方式获取/设置saveState属性；事件处理程序将使用上述代码，但您应该考虑更深思熟虑的事情：

$('#DT-GRvWJTAH').on('stateLoaded.dt', function(e, settings, data) {
  settings.aoPreSearchCols.forEach(function(col, index) {
    if (col.sSearch) setTimeout(function() {
      $('#DT-GRvWJTAH thead th:eq('+index+') input').val(col.sSearch)
    }, 50)
  })
})

查看 stateSaveParams / stateLoadParams 您可以在其中设置/获取列输入的状态。

使用 DataTables 时，某些浏览器中的输入字段在刷新时不清除

Input field doesn't clear on refresh in some browsers when using DataTables

html

javascript

datatables-1.10