Question

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

表填充得很好，输入'new'搜索输入会触发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>

Answer 1

我在这里玩过这个：https://jsfiddle.net/annoyingmouse/r87wu8ps/，我想我知道你的问题是什么。正如你在JSFiddle中看到它应该有效但你的原因并不是你在AJAX结果出现之前初始化搜索...

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

上述内容应该在invSuccess函数内。

我也想知道你为什么不让DataTable为你做AJAX。然后，只要它在DataTable之后被引用，搜索就应该有效。 YMMV。

希望有所帮助。

不使用内置搜索js DataTables

1 个答案: