Not using built in search for js DataTables

Question

I'm using js DataTables to display the results of an ajax query. All works great including the default (built in) Search feature. However, I want to disable the built-in search and use a separate search box positioned up in the navigation bar.

The table populates just fine, typing in the 'new' search input triggers the keyup function and var 'str' contains the correct search value. The code fails on the line:

dt.fnFilter(str).draw();

The table does not filter. I have tried using .search in place of .fnFilter as well.

Any suggestions would be appreciated.

Simplified code below:

$(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>

annoyingmouse annoyingmouse · Accepted Answer · 2017-11-22T07:48:57

I've played with this here: https://jsfiddle.net/annoyingmouse/r87wu8ps/ and I think I know what your issue is. As you'll see in the JSFiddle it should work but the reason yours isn't is that you initialise the search before the result of the AJAX occurs...

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

The above should probably be within the invSuccess function.

I'm also sort of wondering why you don't get the DataTable to do your AJAX for you. Then, as long as it's referenced after the DataTable, the search should work. YMMV.

Hope that helps.

Not using built in search for js DataTables

1 Answers