时间戳

首页 > 解决方案 > 找不到匹配记录时，数据表保存状态过滤不再起作用

javascript - 找不到匹配记录时，数据表保存状态过滤不再起作用

问题描述

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

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

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

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

    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,输出

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

我一直在寻找一段时间，但无法找到有关此问题的任何其他问题。任何帮助将非常感激！

标签： javascriptjquerydatatables

解决方案

我能够从另一个论坛获得帮助。以防万一有人和我有同样的问题，解决方案是以更好的方式选择标题：

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

...代替

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

并在这里使用 jQuery 选择器：

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

...代替

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

推荐阅读