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

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