Question

我正在使用最新版本的DataTables jQuery插件。我启用了列过滤和列重新排序，并将stateSave设置为true。我能够设置列过滤来保存在页面重载时输入到输入字段中的值，即使列已重新排序也是如此。

只有一种情况不起作用。当列过滤器不返回任何结果（没有匹配的记录）并且页面重新加载时，过滤器将无法正常工作：

列过滤器输入字段不再按值显示过滤器
在过滤器输入字段中输入新值不再过滤表

这是我应用列过滤器的功能：

    function fDTApplyColFilters(dtable) {

    //searches column on keypress by column filter data

    var dtHeader = dtable.$('tr').closest('div.dataTables_scroll');

    $('tr:eq(1) th', dtHeader).each(function () {

        $('input', dtHeader).keyup(function () {
            var i = ($(this).parent().index() + ':visible');    //uses parent().index for compatibility with column drag-drop reordering
            if (dtable.column(i).search() !== this.value) {
                dtable
                    .column(i)
                    .search(this.value)
                    .draw();
            }
        });
    });

    //reloads column filter search values when returning to saved state filtered datatable

    var state = dtable.state.loaded();

    if (state) {
        dtable.columns().eq(0).each(function (i) {
            var newindex = dtable.colReorder.transpose(i, 'toOriginal');    //get correct index after any column drag-drop reordering
            var colSearch = state.columns[newindex].search;
            var inputField = dtHeader.find('input');


            if (colSearch.search) {
                inputField.eq(i).val(colSearch.search);
            }
        });

        dtable.draw();
    }
}

没有控制台日志错误，当我将此代码添加到if（colSearch.search）代码部分时，无论表是否返回记录，控制台日志都会返回已保存的完全相同的过滤器参数是否：

      if (colSearch.search) {
                inputField.eq(i).val(colSearch.search);
                console.log(colSearch.search);
                console.log(i);
            }

当过滤器返回表中的记录时，一切工作都非常适合页面重新加载。但是，当表中没有与过滤器匹配的记录时，输入字段将不再显示过滤器值（即使它们仍被保存并以相同的方式在控制台日志中显示，我无法理解）。并且列过滤器不再在按下键盘时过滤表。

我正在附上一个jsbin示例：

https://jsbin.com/cofexabupu/1/edit?html,css,js,output

在名称列中输入过滤器值，然后重新加载页面。如果表中存在名称，则列过滤器将保存名称值。如果该列中不存在名称，则即使在使用“清除过滤器”按钮之后，列输入过滤器字段也不会保存该值，并且过滤也不再适用于该列。

我已经搜索了一段时间，但无法找到有关此问题的其他任何问题。任何帮助将不胜感激！

Answer 1

我能够从另一个论坛获得帮助。万一有人遇到与我相同的问题，解决方案是采用更好的方法选择标题：

var dtHeader = dtable.table().header();

...代替

var dtHeader = dtable.$('tr').closest('div.dataTables_scroll');

并在此处使用jQuery选择器：

var inputField = $(dtHeader).find('input');

...代替

var inputField = dtHeader.find('input');

如果找不到匹配的记录，则数据表保存状态过滤将不再起作用

1 个答案: