Jsgrid: dyanamically data is fetched through Js-grid,but filtering is not working?
MY Jsp 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"
} ]
});
});
});
can any help us?
any help would be greatly appreciated
saikiran214333
All 53 comments
I have also that same problem,filtering is not working..
your help would be greatly appreciated
Thanks in advance
Venkatramanaryams
on 4 Apr 2017
@saikiran214333 Do you have managed the object filter in your Servlet (or other server side component)?
@Venkatramanaryams complete your opened issue providing further information please.
maurorulli
on 4 Apr 2017
no @maurorulli actully i am new to js grid and i fetched the data using servlet and it is shown in the grid.
but i dont know how filter the data.
can u help me out.
saikiran214333
on 4 Apr 2017
k @maurorulli
Venkatramanaryams
on 4 Apr 2017
@saikiran214333 you are loading data two times. First in your external ajax call, and than inside the loadData definition. You have to chose one (the loadData definition is strongly raccomended).
The loadData uses the filter param to define the criteria search.
Check the DOC.
maurorulli
on 4 Apr 2017
As u said @maurorulli i removed the ajax call to one time and i replaced a filter. as u see below
$(function() {
var filter = $("#grid").jsGrid("getFilter");
$("#jsGrid").jsGrid({
height : "auto",
width : "100%",
filtering: true,
sorting : true,
paging : true,
autoload : true,
pageSize : 10,
controller : {
loadData : function() {
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
}, {
} ]
});
});
am not geting throgh the doc site. can u please help me out..... with sample code..
thanks in advance.
saikiran214333
on 5 Apr 2017
Please format the code. Help us to help you.
maurorulli
on 5 Apr 2017
@maurorulli pls help us
$(function() {
$("#jsGrid").jsGrid({
height : "auto",
width : "100%",
filtering: true,
sorting : true,
paging : true,
autoload : true,
pageSize : 10,
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
}, {
} ],
controller : {
loadData : function(filter) {
return $.ajax({
type : "GET",
url : "/Final/Reports",
data :filter
});
},
},
});
});
And what's the problem with this code? Which behavior?
Your Reports servlet get called? Does it recive the data parameter?
maurorulli
on 5 Apr 2017
yes @maurorulli data is came to the GRID table.But Filtering is not working.
saikiran214333
on 5 Apr 2017
What is the "data" parameter's value in your servlet?
maurorulli
on 5 Apr 2017
@maurorulli STRING IS THE PARAMETER.
public class Reports extends HttpServlet {
String jstring = null;
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
PrintWriter out = response.getWriter();
String s1 = request.getParameter("value");
String s2 = request.getParameter("value2");
try {
List<Patient> pList = new ArrayList<Patient>();
Class.forName("");
Connection con = DriverManager
.getConnection(
"XYZ",
"USERNAME", "PASSWORD");
Statement st = con.createStatement();
String query = "QUERY";
System.out.println("MY QUERY=" + query);
ResultSet rs = st.executeQuery(query);
Patient patient = null;
Gson gson = new Gson();
if (rs != null) {
while (rs.next()) {
patient = new Patient();
patient.setPatientId(rs.getString("COLUMN NAME"));
patient.setPatientName(rs.getString("COLUMN NAME"));
patient.setGenderId(rs.getString("COLUMN NAME"));
patient.setMobile(rs.getString("COLUMN NAME"));
pList.add(patient);
}
jstring = gson.toJson(pList);
response.setContentType("application/json");
response.setCharacterEncoding("UTF-8");
response.getWriter().write(jstring); ------->THIS IS THE REPSONSE.
System.out.println(jstring);
} else {
System.out.println("Result:" + rs);
}
} catch (Exception e2) {
e2.printStackTrace();
}
finally {
out.close();
}
}
}
DATA IS COMING Like THIS--- [{"patientId":"1234","patientName":"XYZ","genderId":"02","mobile":"1234567894"}]
saikiran214333
on 5 Apr 2017
Hello @maurorulli I also have same problem ,please tell the suggestion for us.
Thanks in Advance
Venkatramanaryams
on 5 Apr 2017
In your servlet you MUST handle the filter input parameter. The ajax request pass to your servlet all parameters needed to filter the query. You have to use these parameters to create dinamically your SQL.
maurorulli
on 5 Apr 2017
sorry i cannot get you.How can handle the filter input parameter.
can you explain me in detail @maurorulli
saikiran214333
on 5 Apr 2017
try this in your servlet:
System.out.println("The pageSize param is: " + pageSize);
What is your output?
maurorulli
on 5 Apr 2017
It is shownig an error
@maurorulli we can't write like that.we have to declare that variable(pageSize) in java or import from any package.
saikiran214333
on 6 Apr 2017
@tabalinas @maurorulli We want client side filtering.
saikiran214333
on 6 Apr 2017
Sorry, my fault.
System.out.println( "The pageSize param is: " + request.getParameter("pageSize") );
maurorulli
on 6 Apr 2017
@maurorulli this is we got
12:34:37,634 INFO [STDOUT] The pageSize param is: null
saikiran214333
on 6 Apr 2017
And what about:
System.out.println( "The data param is: " + request.getParameter("data") );
maurorulli
on 6 Apr 2017
@maurorulli
12:38:23,907 INFO [STDOUT] The data param is: null
saikiran214333
on 6 Apr 2017
inside your loadData function insert:
alert(filter);
or
console.log(filter);
before the ajax call. What's your output?
maurorulli
on 6 Apr 2017
alert(filter);
without quotes
maurorulli
on 6 Apr 2017
@maurorulli
saikiran214333
on 6 Apr 2017
please inspect and show us the contet of that item with your browser tools.
maurorulli
on 6 Apr 2017
which item @maurorulli
saikiran214333
on 6 Apr 2017
when we are inspect the page we got the below @maurorulli
saikiran214333
on 6 Apr 2017
Is this Useful? @maurorulli
Venkatramanaryams
on 6 Apr 2017
you both are working on the same project?
@saikiran214333 I wolud like to see the content of the object filter. Put a breakpoint on the alert(filter) line and inspect its content.
@Venkatramanaryams Nothing of useful.
maurorulli
on 6 Apr 2017
yes we are working on same project @maurorulli
Venkatramanaryams
on 6 Apr 2017
sorry actually we are using jsp to display the js GRid.How can we add break to that.
@maurorulli
AND Yes we are working on same project
saikiran214333
on 6 Apr 2017
in your browser's console (hit F12 to open hit) you can debug you javascript
maurorulli
on 6 Apr 2017
This is wat we get when break point is set. @maurorulli
saikiran214333
on 6 Apr 2017
Nice. As you can see on the right you can explode the filter var. I have to see it.
maurorulli
on 6 Apr 2017
@maurorulli
saikiran214333
on 6 Apr 2017
Ok. Now come back to your servlet. You should get that request parameters. Try this code in your servlet:
System.out.println("patientId: " + patientId);
System.out.println("patinetName: " + patinetName);
System.out.println("genderId: " + genderId);
System.out.println("mobile: " + mobile);
Try to check the output when you try the filter too.
maurorulli
on 6 Apr 2017
the out put when i try to filter is going to servlet again and exceting the query
@maurorulli
saikiran214333
on 6 Apr 2017
Pls, check the spell. patinetName should be patientName.
Anyway, we are arriving to the spot.
You have to model your SQL dynamically. Something like:
String patientId = request.getParameter("patientId");
String patientName = request.getParameter("patientName");
String genderId = request.getParameter("genderId");
String mobile = request.getParameter("mobile);
String SQL = "SELECT * FROM myTable ";
<check if at least one input paramter is not empty. If so:>
SQL += " WHERE (patientId="+patientId+
" OR patientName LIKE %"+patientName+"% "+
" OR genderId = "+genderId +
" OR mobile LIKE %"+mobile+"%";
Would be a best practice to change Statement into PreparedStatement (google it to learn it).
maurorulli
on 6 Apr 2017
public class Patient {
private String patientId;
private String patientName;
private String genderId;
private String mobile;
public String getPatientId() {
return patientId;
}
public void setPatientId(String patientId) {
this.patientId = patientId;
}
public String getPatientName() {
return patientName;
}
public void setPatientName(String patientName) {
this.patientName = patientName;
}
public String getGenderId() {
return genderId;
}
public void setGenderId(String genderId) {
this.genderId = genderId;
}
public String getMobile() {
return mobile;
}
public void setMobile(String mobile) {
this.mobile = mobile;
}
}
THEN,
we create a objects in servlet
List
we are calling that patient class from servlet @maurorulli
saikiran214333
on 6 Apr 2017
this is the bean you use for output. But you have at first use those 4 input parameters to filter the records in your query.
maurorulli
on 6 Apr 2017
hello @maurorulli Actually we are not passing any parameters from front end....we have a table in our database we want to fetch the data from that database and showing in grid. so for we take ajavascript file and written the js grid code using controller we are calling our servlet like this
controller : {
loadData : function(filter)
{return $.ajax({
type : "GET",
url : "/Final/Reports",---------this my servlet
data:filter
});
then we fetched the data like this
=
My problem here is filters are not working
please tell me the solution for this
Actually i thought that you did not understood my problem thats why requesting again..
THANK YOU SO MUCH
saikiran214333
on 6 Apr 2017
hello @maurorulli
i saw this code in this git hub
https://github.com/tabalinas/jsgrid/issues/200
we have also same problem
i tried like that but did not get result...
we are trying like what @saikiran214333 mentioned in the last comment
please tell me the proper solution for my problem
sorry for irritating you with asking same question many times
Thanks in advance
Venkatramanaryams
on 6 Apr 2017
What I'm trying to say is that you HAVE to build your own FILTERING mechanism. JsGrid has not an out-of-the-box filtering. It has a mask to input the filter values, but you have to use it in your server side to filter data.
You can also provide a client-side filtering (mentioned in the @Venkatramanaryams link), but the server side filtering is the the best choice (lower consumption of traffic data).
So, when filtering is enabled, JsGrid call your servlet passing it data insetring in the filter mask. In your servlet you have to use this strings to filter data in your query. The filterd ResultSet come back to JsGrid that refresh the data in the grid.
maurorulli
on 6 Apr 2017
Good Morning @maurorulli i can change the query but my problem is not that. I put a search boxes below the column name you can saw in above comments. i want working of that search boxes(Filtering is there). like in basic scenario search boxes below http://js-grid.com/demos/ i want to filter or search the data after attaching to the grid table
Venkatramanaryams
on 7 Apr 2017
The sample you refer uses a clinet-side filtering. If you inspect the source code of that page, in the db.js script, you'll find the following snippet:
loadData: function(filter) {
return $.grep(this.clients, function(client) {
return (!filter.Name || client.Name.indexOf(filter.Name) > -1)
&& (!filter.Age || client.Age === filter.Age)
&& (!filter.Address || client.Address.indexOf(filter.Address) > -1)
&& (!filter.Country || client.Country === filter.Country)
&& (filter.Married === undefined || client.Married === filter.Married);
});
},
note: client and clients are the same of your patients.
maurorulli
on 7 Apr 2017
Yes @maurorulli we write like this but search box filters are not working
controller: {
loadData: function(filter) {
var d = $.Deferred();
// send request to the server and filter data there
return $.ajax({
type: "GET",
url: "/Final/Reports",
data: filter,
// dataType: "json"
}).done(function(result) {
result = $.grep(result, function(item) {
// some client-side filtering below
return (!filter.patientId || item.patientId.indexOf(filter.patientId) > -1);
return (!filter.patientName || item.patientName.indexOf(filter.patientName) > -1);
return (!filter.genderId || item.genderId.indexOf(filter.genderId) > -1);
return (!filter.mobile || item.mobile.indexOf(filter.mobile) > -1);
});
d.resolve(result);
});
return d.promise();
},
loadData is called automatically from jsGrid when you use his filtering system.
If you have your own search box (and search button), try something like:
$(yourSearchButton).click(function(){
$("#grid").jsGrid("loadData", {
patientName: yourSearchBox.val(),
patientId: yourSearchBox.val(),
.....
})
);
});
In this manner you'll call manually the loadData method. Refer to DOC
maurorulli
on 7 Apr 2017
hello @maurorulli actually we put the "filtering :true" in our js grid code.So we got that seacrh boxes now we want working of that search boxes for dyanamic data which is coming from controller(calling from servlet URL:"").
saikiran214333
on 7 Apr 2017
@maurorulli we are waitng for your reply.
saikiran214333
on 7 Apr 2017
Sorry, I didn't understood your last question. Has worked fine the previous solution?
maurorulli
on 7 Apr 2017
@saikiran214333, @Venkatramanaryams,
As @maurorulli mentioned js-grid doesn't provide data filtering out-of-box, it should be implemented.
In your case (as you described it) the client-side filtering should be used, so you can load data once and then just filter them on the client, something like:
```js
// fetch data for the grid once at the beginning
$.ajax({ ... }).done(function(data) {
$("#jsGrid").jsGrid({
...,
controller: {
loadData: function(filter) {
return $.grep(data, function(item) {
// client-side filtering below (be sure conditions are correct)
return (!filter.patientId || item.patientId.indexOf(filter.patientId) > -1)
&& (!filter.patientName || item.patientName.indexOf(filter.patientName) > -1)
&& (!filter.genderId || item.genderId.indexOf(filter.genderId) > -1)
&& (!filter.mobile || item.mobile.indexOf(filter.mobile) > -1);
});
}
}
});
})
tabalinas
on 9 Apr 2017
Thanks you @tabalinas @maurorulli @Venkatramanaryams we got it.... #thanksAlot
saikiran214333
on 10 Apr 2017
Related issues
fredericoregateiro
路
3Comments
jufei
路
3Comments
danielson317
路
3Comments
RevealedFrom
路
3Comments
am2222
路
4Comments
Most helpful comment
Thanks you @tabalinas @maurorulli @Venkatramanaryams we got it.... #thanksAlot