Using Ajax to dynamically transform filter conditions

Source: Internet
Author: User
Tags add filter final sql numeric value string table name tostring
ajax| Dynamic | condition

In one of my Java projects, you need to add filtering on top of the list of data to generate different filtering scripts based on the filter criteria that the user chooses:
Here is the first line of the table script ***************************//
&LT;TD align= "center" width= "15%" height= ">" Select query Criteria:</td>
&LT;TD align= "left" width= "30%" ><select name= "FilterName" id= "FilterName"
style= "width:100%" >
<option value= "" ></option>
<option value= ' buginfo_title ' <%=buginfolist.getselected ("Buginfo_title")%>>bug title </option>
<option value= ' Buginfo_buguser ' <%=buginfolist.getselected ("Buginfo_buguser")%>> Install user </option>
<option value= ' Buginfo_bugsystem ' <%=buginfolist.getselected ("Buginfo_bugsystem")%>> installation system </option >
<option value= ' buginfo_bugtime ' <%=buginfolist.getselected ("Buginfo_bugtime")%>> submission time </option>
<option value= ' buginfo_donetime ' <%=buginfolist.getselected ("Buginfo_donetime")%>> completion time </option >
&LT;TD align= "left" width= "37%" id= "Filter" ><%=buginfolist.getfilterhtml ()%></td>
&LT;TD align= "center" width= "18%" ><a class= "TextUrl9" href= "Javascript:dofilter" (); >
Start filtration </A>
<a class= "TextUrl9" href= "Javascript:doall ();" >Src= "Http://" align= "absmiddle" border= "0" > All </A>
Here is the JavaScript script ******************************************************//
/* Get client XMLHttpRequest Request Object * *
function Getrequest () {
var request = false;
try {
Request = new XMLHttpRequest ();
} catch (Trymicrosoft) {
try {
Request = new ActiveXObject ("Msxml2.xmlhttp");
} catch (Othermicrosoft) {
try {
Request = new ActiveXObject ("Microsoft.XMLHTTP");
} catch (Failed) {
Request = false;
if (!request) alert ("Error initialization XMLHttpRequest Object!");
return request;
var request=getrequest ();
Change the filter condition
function Changefilter () {
if (request==null) request=getrequest ();
var name = FrmBugInfo.FilterName.value;
var url = ".. /ajaxfilter?name= "+name;
Request.onreadystatechange = Updatefilter; ("Get", url, True);
Request.send (NULL);
Change the filter condition
function Updatefilter () {
if (request.readystate = = 4) {
if (Request.status = = 200) {
var Text=request.responsetext;
document.getElementById ("Filter"). Innerhtml=text;
} else{
Alert ("State is:" + request.status);
Delete request[' onreadystatechange '];
request=null;//must be emptied.
The following is the Ajaxfilter source code, it is a servlet*********************************************//
Static final string[] time={"smalldatetime", "datetime", "timestamp"};
Static final string[] NUM ={"tinyint", "smallint", "int", "bigint", "decimal", "Numeric",
"Float", "real", "smallmoney", "money", "Binary",};
Static final String SQL = "SELECT * from Datadict where tablename= '%s ' and fieldname= '%s '";
Static final String default= "<input type= ' text ' name= ' filtervalue ' id= ' ' filtervalue ', ' value= ' @value ' style= ' width:100 % ' ></input> ';
Static final String DATE = "<input id=\" @name \ "type=\" text\ "name=\" @name \ "value= ' @value ' \ n"
+ "class=\" textbox\ "readonly=\" readonly\ "style=\" width:100px;\ "/> \ n"
+ "+ "alt=\" Select Date \ "Src=\". /images/image/date.gif\ "width= ' align= ' middle ' >";

The source code in Doget and Dopost
Response.setcontenttype (Content_Type);
PrintWriter Out=response.getwriter ();
String name=request.getparameter ("name");
Out.print (Pagelist.getfilter (name));

* Get Filter type
* @param name filter Select names (including table names and field names)
* @param isadd whether to add Classid,bindfield and other information
* @return
public static string Getfiltertype (String Name,boolean isadd) {
if (name!=null) {
int Index=name.indexof ("_");
if (index>=0) {
String[] Str=new string[2];
Str[0]=name.substring (0,index);
Str[1]=name.substring (index+1);
ResultSet rs=dbaccess.getinstance (). Opencommand (Common.format (SQL,STR));
if ( ()) {//Time
if ( (time,rs.getstring ("FieldType"))) {
return "1";
}else if (!isdbnull (rs.getstring ("ClassID")) {//fixed code
if (Isadd)
Return "2_" +rs.getstring ("ClassID");
Return "2";
}else if (!isdbnull (rs.getstring ("bindtable")) {//FOREIGN Key Association
if (Isadd)
Return "3_" +rs.getstring ("bindtable")
+ "_" +rs.getstring ("Bindfield")
+ "_" +rs.getstring ("Bindshowfield");
Return "3";
}else if ( (num,rs.getstring ("FieldType")) {//numeric
Return "4";
}catch (Exception e) {}
return "0";//Normal string

* Get filter string
* @param name Filter type names
* The first filter value @param value
* @param value1 Second filter value (mainly for time)
* @return
public static string GetFilter (String name,string value,string value1) {
String Type=getfiltertype (name,true);
int Flag=0,pos=type.indexof ("_");
String[] Other=type.split ("_");
if (pos>=0) {
Flag=integer.parseint (type.substring (0,pos));
Flag=integer.parseint (type);
Return GetFilter (flag,other,value,value1);

* Get filter string
* @param type Filter types
* @param Other fixed code number, etc.
* The first filter value @param value
* @param value1 Second filter value (mainly for time)
* @return
public static String getfilter (int type,string[] other,string value,string value1) {
if (value==null) value= "";
if (value1==null) value1= "";
Switch (type) {
Case 0:return Default.replaceall ("@value", value);//String
Case 1:return ("From:" +date.replaceall ("@name", "FromDate"). ReplaceAll ("@value", value)
+ "To:" +date.replaceall ("@name", "ToDate"). ReplaceAll ("@value", value1));/Time
Case 2:if (other.length==2)
Return Html.getinstance (). GetList ("Exec p_getbasecode '")
+other[1]+ "'", True,true, "FilterValue", "100%", value)/fixed code
Case 3:if (other.length==4)
Return Html.getinstance (). GetList ("SELECT distinct" +other[2]+ "," +other[3)
+ "from" +other[1],true,true, "FilterValue", "100%", value);//FOREIGN Key Association
Case 4:return Default.replaceall ("@value", value);//numeric value
Return "";
* Get filter string
* @param name filter names
* @return
public static string GetFilter (string name) {
Return GetFilter (Name, "", "");

* Check to see if empty
* @param obj object to check
* @return
public static Boolean isNull (Object obj) {
if (Obj==null | | obj.tostring (). Equals (""))
return true;
return false;

* Determine if NULL, including blank fields
* @param obj to judge the object
* @return
public static Boolean isdbnull (Object obj) {
if (isNull (obj) | | obj.tostring (). Trim (). toLowerCase (). Equals ("null"))
return true;
return false;
Principle: According to the choice of different filter conditions, get the table name and field name in the condition, using AJAX to get its type in the data dictionary based on the table name and field name:
(1) If the date type: return date range selection
(2) If the code is fixed: return a drop-down list and initialize the fixed code
(3) If the Foreign Key association: then read out all the foreign keys corresponding to the name
(4) Otherwise return a text input box
This choice of different filter conditions (or filter fields), resulting in a different filter effect, and is asynchronous, the following display of data list does not need to refresh, in this project to obtain a better user experience.

Here's a screenshot:

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.