数据表搜索表单不重绘答案

【问题标题】：Datatables Search Form Not Redrawing数据表搜索表单不重绘
【发布时间】：2020-01-12 15:39:19
【问题描述】：

我正在使用最新版本的 DataTables，并且在使用自定义过滤器表单搜索我的 DataTable 时遇到了困难。这是我正在使用的代码：

$("#user-search").on("submit", function (e) {
    e.preventDefault();

    const firstName = $("#first-name").val();
    const lastName = $("#last-name").val();
    const email = $("#email").val();
    const elevated = $("#elevated").is(":checked");

    if (firstName.length > 0) {
        grid.column("FirstName").search(firstName);
    }
    if (lastName.length > 0) {
        grid.column("LastName").search(lastName);
    }
    if (email.length > 0) {
        grid.column("Email").search(email);
    }
    grid.column("Elevated").search(elevated);
    grid.draw();

});

如果我在我的第一个条件语句上设置断点或调试器并逐步浏览代码，它看起来好像代码应该按预期执行。然而发生的事情是它永远不会重绘我的数据。

我的意思是我可以在我的搜索表单中输入值，单击搜索，它调用grid.column("...").search(...);，到达grid.draw();，搜索前可见的数据与搜索后的数据相同。

【问题讨论】：

标签： jquery datatables

【解决方案1】：

在对 API 文档进行了一些挖掘之后，我最终能够解决这个问题。

问题有两个方面。首先，我提供了错误的column selector。我错误地假设传递列名称，如 columns.data 中所述，是您选择列的方式。相反，您需要指定 columns.name 属性，然后在列选择器中附加 :name 后缀：

var grid = $("...").DataTable(
    ...
    columns: [
        ...
        {
            data: "FirstName",
            name: "FirstName",
            title: "First Name"
        }
        ...
    ]
);

然后：

grid.column("FirstName:name").search(firstName);

第二个问题是，因为我不想在初始化 DataTables 时提供搜索输入，所以我将 datatable.Searchable 属性设置为 false。这完全阻止了搜索方法的执行。相反，我删除了该属性（因为它默认设置为 true），然后我设置了 datatable.Dom 属性：

var grid = $("...").DataTable(
        ...
        dom: "ltipr"
);

最后，一些不相关但可能对通过 Google/Bing 搜索到达这里的人有用的东西，我的 jQuery 不会给我想要的行为。如果我搜索某些内容，重置表单并再次尝试搜索，它不会重绘包含所有行的数据表。为此，我只是删除了我的 If/Then 语句。

【讨论】：