Long time no code has been written, hand a little itchy, just under the younger brothers some of the realization of the function really affect the progress of the project, they have to write a paragraph.
Features: JS front page display + Background data response (JAVA servlet can)
Frame: jquery1.8.7
The purpose of this article: to those who just entered the software development, like this also look, that also look, here copy, where copy of the Junior small birds do a table handsome;
1 for the program should be serious and practical sit down;
2 procedures need to have input to reap;
3 has the harvest to be encouraged, only then the motive force step by step goes down!
The following code, there will be a small note
1, the Web page logic processing (JS code to write to the page, there is a benefit, debugging will not be affected by the JS file cache)
Copy Code code as follows:
<%@ page language= "java" contenttype= "text/html; Charset=utf-8 "pageencoding=" Utf-8 "%>
<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "HTTP://WWW.W3.ORG/TR/HTML4/LOOSE.DTD" >
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 ">
<title> Order Settlement </title>
<script type= "Text/javascript" src= "Js/jquery-1.8.7.min.js" ></script>
<link href= "Images/style.css" type= "Text/css" rel= "stylesheet" >
<body>
<div align= "left" style= "width:83%" >
<p style= "Color:blue" >
Purchase order Status:
<select id= "Orderstatus" >
<option value= "" Selected>-search all!-</option>
<option value= "Open" > Open </option>
<option value= "part" > Part </option>
<option value= "closed" > Closed </option>
</select>
<input type= "button" style= "height:25px;width:70px" value= "Query" onclick= "Firstfindpage (1)"/>
<br>
</p>
</div>
<div>
<table width= "100%" cellpadding= "0" cellspacing= "0" border= "1" style= "Padding:2" bordercolorlight= "#3B4D61" bordercolordark= "#ffffff" id= ' ContentList ' >
</table>
</div>
<br>
<div>
<table width= "100%" cellpadding= "0" cellspacing= "0" border= "0" style= "padding:2" id= ' pagelist ' >
</table>
</div>
</body>
<script type= "Text/javascript" >
Populating page Information
function Writepagelist (curpage,wholepage) {
var pagecontent = "";
if (curpage!= 1) {
PageContent + = "<a href= ' # ' onclick= ' findpage (1) ' style= ' Text-decoration:none '" ><b style= ' Font-size:12 ' > First page </b></a> ";
PageContent + + <a href= ' # ' onclick= ' Findpage ("+ (parseint (curpage)-1) +") ' style= ' Text-decoration:none ' ><b style= ' font-size:12 ' > prev </b></a>;
}
if (curpage!= wholepage) {
PageContent + = "<a href= ' # ' onclick= ' Findpage (" + (parseint (curpage) +1) + ") ' style= ' Text-decoration:none" ><b style= ' font-size:12 ' > next page </b></a>;
PageContent + = "<a href= ' # ' onclick= ' Findpage (" + (parseint (wholepage)) + ") ' style= ' Text-decoration:none" ><b style= ' font-size:12 ' > last page </b></a>;
}
if (1 = wholepage) {
PageContent + = "<a href= ' # ' onclick= ' Findpage (" + (parseint (wholepage)) + ") ' style= ' Text-decoration:none" ><b style= ' Font-size:12 ' > currently only one page </b></a>;
}
PageContent + = "page: <label id= ' curpage ' style= ' color:red; Font-size:13 ' > ' +curpage+ ' </label>/<label id= ' wholepages ' style= ' color:red; Font-size:13 ' > ' +wholepage+ "</label>";
PageContent + + <input id= ' ppage ' type= ' text ' size= ' 5 '/><input type= ' button ' style= ' height:25px;width:55 px ' value= ' >> jump ' onclick= ' gotoPage () '/> ';
alert (pagecontent);
$ (' #pageList '). empty ();
$ (' #pageList '). Append ("<tr><td>" +
PageContent
+ "</td></tr>");
}
Yau Order Status
function Changestatus (Orid) {
var status = $ (' #status ' +orid). Val ();
if (Status==null | | status==undefined) {
Alert ("state information cannot be empty!") ");
Return
}
$.post ("Detailchange", {
Etype:11,
Orid:orid,
Status:status
}, function (data) {
if (parseint (data) > 0)
Alert ("State leisurely success");
Else
Alert ("Modify failed");
});
}
For checking Order Details
function Findorderdetail (Orid) {
var urls = "findorderdetail.jsp?orid=" +orid;
window.open (URLs, ' newwindow ', ' Height=400,width=600,top=100,left=200,toolbar=no,menubar=no,scrollbars=yes, Resizable=no,location=no, Status=no ');
}
Populating table Data
function Writecontent (data) {
alert (data);
var content = data. Orders;
$ (' #contentList '). empty ();
$ (' #contentList '). Append ("<tr>" +
"<td><b style= ' font-size:16 ' > Purchase number </b></td>" +
"<td><b style= ' font-size:16 ' > Person </b></td>" +
"<td><b style= ' font-size:16 ' > Order date </b></td>" +
"<td><b style= ' font-size:16 ' > Memo </b></td>" +
"<td><b style= ' font-size:16 ' > Status </b></td>" +
"<td><b style= ' font-size:16 ' > Operation 1</b></td>" +
"<td><b style= ' font-size:16 ' > Operation 2</b></td>" +
"</tr>");
$.each (content,function (IDX, item) {
var TDC = "<tr>" +
"<td>" +string (Item.orid) + "</td>" +
"<td>" +string (item.wname) + "</td>" +
"<td>" +string (item.date) + "</td>" +
"<td>" +string (Item.remark) + "</td>" +
"<td><select id= ' status" +string (Item.orid) + "' style= ' height:25px;width:80px ' >" +
"<option value= '" +string (item.orderstatus) + "' selected> open </option>" +
"<option value= ' open ' > Open </option>" +
"<option value= ' part ' > part </option>" +
"<option value= ' knot ' > Closed </option>" +
"</select></td>" +
"<td><input type= ' button ' value= ' modify State ' style= ' height:25px;width:80px ' onclick= ' changestatus ' (" +String "( Item.orid) + ") '/></td> ' +
"<td><input type= ' button ' value= ' View details ' style= ' height:25px;width:80px ' onclick= ' Findorderdetail ' (" +String "( Item.orid) + ") '/></td> ' +
"</tr>";
Alert (TDC);
$ (' #contentList '). Append (TDC);
});
}
For page Jump
function Findpage (PageID) {
var curstatus = $ (' #orderstatus '). Val ();
$.post ("Allcheckaction", {
Executetype:5,
Page:pageid,
Orderstatus:curstatus,
Pagerows:1
}, function (data) {
var contents = data. Contentbody;
$.each (contents,function (ID, ite) {
var curpage = ite.page;
var wholepages = ite.wholepage;
con = ite.searchtext;
$.post ("Allcheckaction", {
Executetype:6,
Scondition:con
},function (data2) {
Writecontent (DATA2);
}, "JSON");
Writepagelist (curpage,wholepages);
});
}, "JSON");
}
Query button Call
function Firstfindpage (PageID) {
Findpage (PageID);
}
For page jump response logical processing, that is, directly from the input page to jump
function GotoPage () {
var ppage = $ (' #ppage '). Val ();
var maxpage = $ (' #wholepages '). InnerHTML;
Numint () function to determine whether a number
if (ppage = null | | ppage = = Undefined | | (!numint (ppage)) {
Alert ("Invalid page number!") ");
Return
}
if (parseint (ppage) >parseint (maxpage) | | parseint (ppage) <1) {
Alert (There is no page number on the request page!) ");
Return
}
Findpage (ppage);
};
To determine whether an integer
function Numint (value) {
var p = "0123456789";
for (var i = 0; i < value.length; i++) {
var num = p.indexof (Value.charat (i));
if (num < 0) {
return false;
}
}
return true;
}
</script>
2 Java code for background page response (that is, a standard servlet)
Copy Code code as follows:
Package com.ljb.ttt.servlet;
Import java.io.IOException;
Import Java.io.PrintWriter;
Import javax.servlet.ServletException;
Import Javax.servlet.http.HttpServlet;
Import Javax.servlet.http.HttpServletRequest;
Import Javax.servlet.http.HttpServletResponse;
Import Com.ljb.ttt.impl.BasicDao;
public class Allcheckaction extends HttpServlet {
protected void Doget (HttpServletRequest req, HttpServletResponse resp)
Throws Servletexception, IOException {
DoPost (req, resp);
}
protected void DoPost (HttpServletRequest req, HttpServletResponse resp)
Throws Servletexception, IOException {
try {
int executetype =-1;
String types = Req.getparameter ("Executetype");
if (types = null)
Return
Else
Executetype = integer.valueof (types);
PrintWriter out = Resp.getwriter ();
Basicdao bd = new Basicdao ();
Switch (executetype) {
Case 5:
String orderstatus = Req.getparameter ("Orderstatus");
Integer page = integer.valueof (req.getparameter ("page"));
Integer pageSize = integer.valueof (Req.getparameter ("pagerows"));
String condition = "";
String content = "";
Integer wholepages = 0;
if (orderstatus!= null && (!orderstatus.equals (""))) {
Condition = String.Format ("and orderstatus= '%s '", orderstatus);
}
int wholesize = Bd.count ("' Order ' t1,worker T2", PageSize, "and T1.wid=t2.wid" +
Condition+ "and T1.orid in (select Orid from OrderDetail)");
if (0 = wholesize%pagesize)
Wholepages = wholesize/pagesize;
Else
Wholepages = wholesize/pagesize + 1;
Judgment handling for incorrect pages
if (page >= wholepages)
page = Wholepages;
if (page<=1)
page = 1;
Condition + = String.Format ("Limit%d,%d", pagesize* (page-1), pageSize);
Content = String.Format ("{\ contentbody\": [{\ "page\": \ "%d\", \ "wholepage\": \ "%d\", \ "searchtext\": \ "+condition+" \ "}]}",
Page,wholepages);
Out.print (content);
SYSTEM.OUT.PRINTLN (content);
Break
For orderclose.jsp in Get order data
Case 6:
String Sconditon = (string) req.getparameter ("Scondition");
if (Sconditon!= null) {
if (Sconditon.equals (""))
Out.print (Getjsondata (6, "", "Orders", BD));
Else
Out.print (Getjsondata (6, Sconditon, "Orders", BD));
}
Break
Default
Break
}
Out.flush ();
Out.close ();
catch (IOException e) {
E.printstacktrace ();
}
}
Generate data from a search SQL
Private String getjsondata (int type,string searchcontent,string Jsonname,basicdao BD) {
String sql = "";
Switch (type) {
Get
Case 6:
sql = String.Format ("Select T1.orid,t2.wname,t1.date,t1.remark,t1.orderstatus from ' Order" T1,worker T2 where t1.wid= T2.wid "+
"And T1.orid in (select Orid from OrderDetail)%s", searchcontent);
Break
Default
Break
}
String temp = bd.getjsonstr (sql,jsonname);
SYSTEM.OUT.PRINTLN (temp);
return temp;
}
}
3 configuration reference for servlet in Web.xml
Copy Code code as follows:
<!--various inventory-->
<servlet>
<servlet-name>CheckSaveServlet</servlet-name>
<servlet-class>com.ljb.ttt.servlet.CheckSaveServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>CheckSaveServlet</servlet-name>
<url-pattern>/CheckSaveServlet</url-pattern>
</servlet-mapping>
4 A key way to pay for this background call is to convert the query into a JSON data format
Copy Code code as follows:
return DataType {"tittle": [{"ColName": "Val",..},{},{}]}
public string Getjsonstr (string sql,string jsonname) {
String jsonstr = "";
String Tjson = "";
Connection con = null;
ResultSet rs = null;
PreparedStatement PST = NULL;
con = sh.getconnection ();
Hashmap<string,object> HM = Sh.select (Con, PST, RS, SQL, NULL);
rs = (ResultSet) hm.get ("ResultSet");
int colnum;
try {
Colnum = Rs.getmetadata (). getColumnCount ();
String colname[] = new String[colnum];
for (int i= 0;i<colnum;i++)
Colname[i] = Rs.getmetadata (). getColumnName (i+1);
while (Rs.next ()) {
Jsonstr + = "{";
String temp = "";
for (int i= 0;i<colnum;i++) {
temp = "" ";
Temp + + colname[i];
temp + = "\": \ "";
temp = rs.getstring (i+1);
temp + = "\";
}
Jsonstr + + temp.substring (0, Temp.length ()-1);
Jsonstr + = "},";
}
Tjson + + "{\" "+jsonname +" \ ": [";
if (jsonstr!= "")
Tjson + + jsonstr.substring (0, Jsonstr.length ()-1);
Tjson + = "]}";
catch (SQLException e) {
TODO auto-generated Catch block
E.printstacktrace ();
}
PST = (PreparedStatement) hm.get ("PreparedStatement");
Sh.closeall (RS, PST, con);
return Tjson;
}
Note：
1 has not seen the method call, do not worry, did not have the Java connection database are no problem;
2 There is a relatively deficient place in this, the number of pages and page data two times Ajax request to get, this is very affecting performance, if you can do an AJAX request, a resolution to get all the data needs, it is better (nested JSON is a good choice).
3 because it's not a full-time web developer, it's hard to find this CSS style to match.
Finally put a picture of the effect:
