jsGrid plugin - How to filter with remote data?

Question

I'm a newbie when it comes to javascript. I'm using the jsGrid plugin to display a grid in the browser. The grid column headers will have the values "Request Status" and "Request Id". I can make it work with static data.

(function() {
    var adminDashboardController = {
        loadData: function(filter) {
            return $.grep(this.requests, function(request) {
                return (!filter.Status || request.Status === filter.Status)
                && (!filter.RequestId || request.RequestId.indexOf(filter.RequestId) > -1)
            });
        },

        insertItem: function(insertingReq) {
        },

        updateItem: function(updatingReq) { 
        },

        deleteItem: function(deletingReq) {
        }
    };

    window.adminDashboardController = adminDashboardController;

    adminDashboardController.status = [
        { Name: ""},
        { Name: "Requested"},
        { Name: "Declined"}
    ];

    //This is the static data
    adminDashboardController.requests = [
        { "Status": "Requested", "RequestId": "1"},
        { "Status": "Declined", "RequestId": "2"}
    ];
}());

But when it comes to fetching the data from an ajax call (using a json file for testing as the data source), the data no longer gets filtered when I choose "Requested" or "Declined" as the filtering criterion. I'm using the format mentioned in the documentation like this -

(function() {
    var adminDashboardController = {
        loadData: function (filter) {
            return $.ajax({
                type: "GET",
                dataType: "json",
                url: "/json/db514.json",
                data: filter
            });
        },
        insertItem: function(insertingReq) {
        },

        updateItem: function(updatingReq) { 
        },

        deleteItem: function(deletingReq) {
        }
    };

    adminDashboardController.status = [
        { Name: ""},
        { Name: "Requested"},
        { Name: "Declined"}
    ];
}());

I can't understand how to implement the filtering in this case!

tabalin tabalin · Accepted Answer · 2016-11-27T15:09:10

The reason is that filtering should be implemented in the code.

In general it can be done:

on the client (just as in your first sample)
on backend, then you have to pass the filter to your endpoint, which will do filtering and return data.
combined approach (partially on backend and after on the client)

In your case you could either add an endpoint on backend, which will load json and filter data, or still do filtering on client-side, for example:

loadData: function (filter) {
    return $.ajax({
        type: "GET",
        dataType: "json",
        url: "/json/db514.json"
    }).then(function(requests) {
        return $.grep(requests, function(request) {
            return (!filter.Status || request.Status === filter.Status)
            && (!filter.RequestId || request.RequestId.indexOf(filter.RequestId) > -1)
        });
    });
}

Checkout this issue on GtiHub https://github.com/tabalinas/jsgrid/issues/32.

jsGrid plugin - How to filter with remote data?

1 Answers