Home > Developer > Web Develop
With a few previous articles on the basis of the Strus2+json combination, I have also tried to write a paginated table to display the data code. Also did not waste a bit of time, finally took care of, "the paper on the end of light, aware of this matter to preach", haha, not to say, specifically as follows:
1. Front Page---HTML code +CSS code +JS code
HTML code:
<body class= "Body" > <table class= "tab" > <tr class= "Tr_0" > <td class= "Td_1" > Serial number </td> <td class= "td_2" > Name </td> <td class= "td_3" > Symptoms </td> <td class= " Td_4 "> Etiology </td> <td class=" td_5 "> Preventive measures </td> </tr> </table> <div class= "Pagebtn" > <span class= "currentpage" > </span> page, Total <span class= "Totalpage" ></ Span> page <span id= "FirstPage" class= "Pageclick" > Home </span> <span id= "prev" class= " Pageclick "> Prev </span> <span id=" Next "class=" Pageclick "> Next </span> <span id=" LastPage "class=" Pageclick "> Last page </span> <span id=" Jump "class=" Pageclick "> Skip to </span> <input type= "text" class= "page_input" > Page </div> </body>
<style type= "Text/css" >.body{margin:50px;}. Tab{font-size:13px;border-collapse:collapse;}. tab TD{BORDER:1PX solid #211; text-align:center;}. td_1{width:28px;}. td_2{width:92px;}. td_3,.area_1{width:150px;}. td_4,.area_2{width:150px;}. td_5,.area_3{width:180px;}. tab TEXTAREA{OVERFLOW:AUTO;BORDER:0;FONT-SIZE:13PX;}. pagebtn{font-size:14px;margin-top:20px;}. Pagebtn Span{cursor:pointer;}. pageclick{padding-left:10px;padding-right:10px;}. Page_input{margin-left:5px;margin-right:5px;width:45px;text-align:center;} </style><script type= "Text/javascript" src= "js/jquery1.9.1.js" ></script><script charset= "gb2312" type= "text /javascript "> $ (function () {var total = 0;//number of records in the datasheet var pageSize = 4;//A page showing 4 records var curpage = 1;//Current page variable $.post (" Page/countall ", NULL, function (data) {total = Data.count; $ (". CurrentPage"). Text ("1"); ShowPage (1,4);//Open the page by default displays the first page var pagetotal = Math.ceil (total/pagesize); Total pages $ (". Totalpage"). Text (pagetotal); The total page information is written to the front page $ ("#next"). Click (function () {if (curpage = = pagetotal) {alert ("This is the last page"); Curpage = Pagetotal; } else {curpage++; GotoPage (curpage,total); } }); $ ("#prev"). Click (function () {if (curpage = = 1) {alert ("This is the first page"); Curpage = 1; } else {curpage--; GotoPage (curpage,total); } }); $ ("#firstPage"). Click (function () {curpage = 1; GotoPage (curpage,total); }); $ ("#lastPage"). Click (function () {CURPage = Pagetotal; GotoPage (curpage,total); }); $ ("#jump"). Click (function () {if (". Page_input"). Val () <= pagetotal && $ (". Page_input"). val ()! = ") { Curpage = $ (". Page_input"). Val (); GotoPage (curpage,total); }else{alert ("The page number you entered is incorrect!) "); $ (". Page_input"). Val ("). focus (); } }); });}); function ShowPage (curpage,total) {//Table mode displays the obtained data $.ajax ({URL: "page/show", data: {"PageIndex": Curpage},type: "POST", DataType: "JSON", success:function (data) {var result = eval (data.result); $ (". tab TR:GT (0)"). Remove (); $.each (result, function (I,o) {$ (". tab"). Append ($ ("<tr><td>" + o.id+ "</td><td>" +o.name + "</td><td><textarea class= ' area_1 ' >" + o.symptom + "</textarea></td><td>< TextArea class= ' area_2 ' > ' + O.reason + ' </textarea></td><td><textarea class= ' area_3 ' > ' + O.cure + "</textareA></td></tr> ")); }); }});} function GotoPage (curpage,total) {$ (". CurrentPage"). Text (curpage); ShowPage (curpage,total); } </script>
<struts> <constant name= "Struts.devmode" value= "true"/><package name= "Ajaxpage" extends= " Json-default "namespace="/page "><action name=" show "class=" testaction. Pagejsonajaxaction "method=" showpage "><result name=" Success "type=" JSON "></result></action> <action name= "Countall" class= "testaction. Pagejsonajaxaction "method=" Countall "><result name=" Success "type=" JSON "></result></action> </package></struts>
3. Background Action class---Pagejsonajaxaction.java
The associated jar packages are as follows, and my jar packages are all placed under the/webroot/web-inf/lib
Package Testaction;import Java.sql.connection;import Java.sql.resultset;import java.sql.resultsetmetadata;import Java.sql.sqlexception;import Java.sql.statement;import Net.sf.json.jsonarray;import net.sf.json.JSONException; Import Net.sf.json.jsonobject;import SQL. Sqlconnection;import com.opensymphony.xwork2.actionsupport;/** @author Little Chardonnay * 2014/12/23 * */public class Pagejsonajaxaction extends actionsupport{private static final long serialversionuid = 1l;private int pageindex;// The number of pages sent to the receiving page private int count;//Save the total number of records private String result;//as the response result in JSON format passed to the foreground page/** * Three variables getter and setter, In the absence of any setting, the return value of all getter methods under the class will be included in the JSON string returned to the client. To exclude attributes that you do not need to include, you need to annotate the * with @json (Serialize=false) on the getter method in the class structure, but you can also remove the getter method directly without affecting the other business. * */public String GetResult () {return result;} public void Setresult (String result) {This.result = result;} public int GetCount () {return count;} public void SetCount (int count) {This.count = count;} public int Getpageindex () {return pageIndex;} public void SetpageindEX (int pageIndex) {this.pageindex = PageIndex;} /** query data table All records */public String Countall () throws sqlexception{//gets the total number of records in the data table System.out.println ("Page count begins ....") ); Connection con = new SQLConnection (). getconnection (); String sql = "SELECT * from Desease"; Jsonobject Jo = new Jsonobject (); int c = 0;try {Statement st = con.createstatement (); ResultSet rs = st.executequery (sql); while (Rs.next ()) {C + +;} Count = C; System.out.println ("The Count is" +count); Jo.element ("Count", c); result = Jo.tostring ();} catch (SQLException e) {e.printstacktrace ();} Finally{con.close ();} System.out.println ("Page count ends ...."); return SUCCESS;} /** query the corresponding page should have the result set record */public String ShowPage () throws Sqlexception{system.out.println ("Show page begins ..."); int m = PageIndex * 4;//m-3 ~ mconnection con = new SQLConnection (). getconnection (); String sql;if (M = = 4) {sql= "select* from Desease where id<5";} Else{sql= "SELECT Top 4 * from desease where (id not in (select Top" + (M-4) + "ID from desease)";//"SELECT * FROM Desease WH ErE id< "+index+" ";} try {Statement st = con.createstatement (); ResultSet rs = st.executequery (sql); result = Resultsettojson (RS);} catch (SQLException e) {e.printstacktrace ();} Finally{con.close ();} System.out.println ("Show page ends ...."); return SUCCESS;} /** query result set record becomes JSON object directly */public String Resultsettojson (ResultSet rs) throws Sqlexception,jsonexception {//JSON array Jsonarray array = new Jsonarray ();//Gets the number of columns ResultSetMetaData MetaData = Rs.getmetadata (); int columnCount = Metadata.getcolumncount (); Traverse each data in the resultset while (Rs.next ()) {Jsonobject jsonobj = new Jsonobject (); Traverse each column for (int i = 1; I <= columnCount; i++) {String columnName =metadata.getcolumnlabel (i); String value=rs.getstring (columnName); Jsonobj.put (columnName, value); } array.element (jsonobj);} return array.tostring (); } }
Strust2 + JSON + jquery page table display data
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
