不使用内置搜索 js DataTables答案

【问题标题】：Not using built in search for js DataTables不使用内置搜索 js DataTables
【发布时间】：2017-11-21 20:32:52
【问题描述】：

我正在使用 js DataTables 来显示 ajax 查询的结果。一切都很好，包括默认（内置）搜索功能。但是，我想禁用内置搜索并使用位于导航栏中的单独搜索框。

表格填充得很好，输入“新”搜索输入会触发 keyup 功能，并且 var 'str' 包含正确的搜索值。代码失败就行了：

dt.fnFilter(str).draw();

表格不过滤。我也尝试使用 .search 代替 .fnFilter 。

任何建议将不胜感激。

下面的简化代码：

$(document).ready(function () {

var dt;
getInventory();

$('#searchbox2').keyup(function () {
        var str = this.value;
        dt.fnFilter(str).draw();
    });
});

function getInventory() {
var Inventory = $.ajax({
    cache: false,
    type: "POST",
    dataType: "json",
    contentType: "application/json; charset=utf-8",
    url: "WebService.asmx/GetInventory"
});

Inventory.done(invSuccess);

function invSuccess(data, status) {
    var inv = JSON.parse(data.d);
    dt = $('.datatables-table').DataTable({
        scrollY: '70vh',
        scrollCollapse: true,
        paging: false,
        mark: true,
        data: inv,
        "columnDefs": [
            { data: "id", targets: 0 },
            { data: "name", targets: 1 },
            { data: "acro", targets: 2 },
            { data: "contact", targets: 3 },
            { data: "type", targets: 4 },
            { data: "stat", targets: 5 },
            { data: "desc", targets: 6 }
            'm]
        });
    };
};

.dataTables_filter{
    display: none;
}

<head runat="server">
    <title>Test</title>
    <link href="css/datatables.css" rel="stylesheet" />
    <link href="css/datatables.mark.css" rel="stylesheet" />
    <script src="Scripts/jquery-3.2.1.min.js"></script>
    <script src="Scripts/datatables.min.js"></script>
    <script src="Scripts/datatables.mark.min.js"></script>
    <script src="Scripts/jquery.mark.min.js"></script>
    <script src="Scripts/default.js"></script>
</head>
<body>
<div class="row navbar">
        Search:
        <input type="text" id="searchbox2">
</div>
<div class="main" style="margin-top: 10px;">
    <table id="tblINV" class="datatables-table table table-striped table-hover table-bordered">
        <thead>
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Acronym</th>
                <th>Contact</th>
                <th>Type</th>
                <th>Status</th>
                <th>Description</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
</div>
</body>

【问题讨论】：

标签： javascript datatables

【解决方案1】：

我在这里玩过这个：https://jsfiddle.net/annoyingmouse/r87wu8ps/，我想我知道你的问题是什么。正如您将在 JSFiddle 中看到的那样，它应该可以工作，但您的原因是您在 AJAX 的结果发生之前初始化了搜索...

$('#searchbox2').keyup(function () {
        var str = this.value;
        dt.search(str).draw();
    });
});

以上内容可能应该在invSuccess 函数内。

我也有点想知道为什么您不让 DataTable 为您执行 AJAX。然后，只要在 DataTable 之后引用它，搜索就应该起作用。 YMMV。

希望对您有所帮助。

【讨论】：

谢谢烦人的老鼠。现在完美运行！