dynamic data is fetched through Js-grid, but filtering is not working?

Question

Here is my JS code for JS Grid

$(function() {

        $.ajax({
            type : "GET",
            url : "/Final/Reports?value=2016-03-03&value2=2017-03-03"
        }).done(function() {

            $("#jsGrid").jsGrid({
                height : "auto",
                width : "100%",         
                filtering: true,
                   sorting : true,
                paging : true,
                autoload : true,
                pageSize : 3,
                controller : {
                    loadData : function(filter) {
                        return $.ajax({
                            type : "GET",
                            url : "/Final/Reports?value=2016-03-03&value2=2017-03-03",
                            data : filter
                        });
                    },
                },
                fields : [ {
                    name : "patientId",
                    type : "text",
                    width : 150
                }, {
                    name : "patientName",
                    type : "text",
                    width : 150
                }, {
                    name : "genderId",
                    type : "number",
                    width : 150
                }, {
                    name : "mobile",
                    type : "number",
                    width : 150
                }, {
                    type : "control"
                } ]
            });

        });
    });

I am new to JS grid and I fetched the data using servlet and it is shown in the grid. But I don't know how to filter the data.

Any ideas?

Answer 1

Client-side filtering and server-side filtering are completely on shoulders of developer. Client-side filtering implemented in loadData method of controller. Server-side apparently implemented with server script that receives filtering parameters, and uses them to fetch data, and pass to client.

That's why you can use client-side and server-side filtering at the same time. Here is how your controller.loadData method could look like in this case:

loadData: function(filter) {
    var d = $.Deferred();

    // server-side filtering
    $.ajax({
        type: "GET",
        url: "/items",
        data: filter,
        dataType: "json"
    }).done(function(result) {
        // client-side filtering
        result = $.grep(result, function(item) {
             return item.SomeField === filter.SomeField;
        });

        d.resolve(result);
    })

    return d.promise();
}

The source issue: https://github.com/tabalinas/jsgrid/issues/32