Jquery + json implement paging effect, and jqueryjson implement Paging

Jquery + json implement paging effect, and jqueryjson implement Paging

Json is a lightweight data exchange format. Due to its convenience in Data Transmission Format, I accidentally want to apply it to paging implementation today. Paging is a long-term topic in web development, the efficiency and importance of its applications are not mentioned.
Main technologies in this article: reflection mechanism, Json data format, jquery
To ensure the versatility of applications, we must first convert any type of result objects to Json format based on the reflection mechanism.

Public static String toJSON (Object obj) {HashMap map = new HashMap (); Class c = obj. getClass (); // use a reflection system to reflect and use all the attributes in it. In this way, attributes of any object can be found, // encapsulate the names and values of these attributes into a map. Field [] fields = c. getDeclaredFields (); for (int I = 0; I <fields. length; I ++) {String name = fields [I]. getName (); try {fields [I]. setAccessible (true); Object o = fields [I]. get (obj); I f (o instanceof Number) {map. put ("" + name + ", o. toString ();} else if (o instanceof String) {map. put ("" + name + "," + o. toString () + ") ;}} catch (IllegalArgumentException e) {} catch (IllegalAccessException e) {} // convert map object to String // these formats also need to convert = to: String s = map. toString (); // System. out. println (s); String str = s. replaceAll ("" = "," ":"); // System. out. println (str); return str ;}

After converting multiple objects to Json-type objects, add paging information to convert multiple Json strings to the entire Json type.

{"0":{"id":"0", "name":"dong0", "age":21},"1":{"id":"1", "name":"dong1", "age":21},"2":{"id":"2", "name":"dong2", "age":21},"3":{"id":"3", "name":"dong3", "age":21},"4":{"id":"4", "name":"dong4", "age":21},"5":{"id":"5", "name":"dong5", "age":21},"6":{"id":"6", "name":"dong6", "age":21},"7":{"id":"7", "name":"dong7", "age":21},"8":{"id":"8", "name":"dong8", "age":21},"9":{"id":"9", "name":"dong9", "age":21},"10":{"firstPage":1, "currentPage":1, "default_Record_Num":10, "lastPage":10, "frontPage":1, "sum":100, "nextPage":2},"length":11}

When the information is sent to the client, only jquery can receive the data of the object. This allows the foreground style to be separated from the data transmitted in the background, which simplifies the code.

$. GetJSON ("result. jsp? Page = "+ p, function (json) {$ ("# show" example .html ("<tr> <th> User ID </th> <th> User Name </th> <th> User age </th>/ tr> "); for (var I = 0; I <json. length-1; I ++) {$ ("# show "). append ("<tr> <td>" + json [I] ["id"] + "</td> <td>" + json [I] ["name"] + "</td> <td>" + json [I] ["age"] + "</td> </tr> ");} $ ("# currentPage "). attr ("value", json [json. length-1] ["currentPage"]); $ ("# pageCount "). attr ("value", json [json. length-1] ["lastPage"]) ;});

The code for refreshing pagination implemented using JQuery and JSon is as follows:

Four files are required.
One object file CategoryInfoModel. cs
One SqlHelper SQLHelper. cs
An AJAX server processing program PagedService. ashx
One client calls WSXFY.htm
CategoryInfoModel. cs and SQLHelper. cs I will not write any more, and I know what files it is.
The PagedService. ashx code is as follows:

Using System. web. script. serialization; public void ProcessRequest (HttpContext context) {context. response. contentType = "text/plain"; string strAction = context. request ["Action"]; // obtain the page number if (strAction = "GetPageCount") {string strSQL = "select count (*) FROM CategoryInfo"; int intRecordCount = SqlHelper. executeScalar (strSQL); int intPageCount = intRecordCount/10; if (intRecordCount % 10! = 0) {intPageCount ++;} context. response. write (intPageCount);} // obtain else if (strAction = "GetPageData") {string strPageNum = context. request ["PageNum"]; int intPageNum = Convert. toInt32 (strPageNum); int intStartRowIndex = (intPageNum-1) * 10 + 1; int intEndRowIndex = (intPageNum) * 10 + 1; string strSQL = "SELECT * FROM (select id, categoryName, Row_Number () OVER (order by id asc) AS rownum FROM CategoryInfo) AS t "; strSQL + =" WHERE t. rownum> = "+ intStartRowIndex +" AND t. rownum <= "+ intEndRowIndex; DataSet ds = new DataSet (); SqlConnection conn = SqlHelper. getConnection (); ds = SqlHelper. executeDataset (conn, CommandType. text, strSQL); List <CategoryInfoModel> categoryinfo_list = new List <CategoryInfoModel> (); // defines the object set for (int I = 0; I <ds. tables [0]. rows. count; I ++) {CategoryInfoModel categoryinfo = new CategoryInfoModel (); categoryinfo. categoryInfoID = Convert. toInt32 (ds. tables [0]. rows [I] ["ID"]); categoryinfo. categoryName = ds. tables [0]. rows [I] ["CategoryName"]. toString (); categoryinfo_list.Add (categoryinfo);} JavaScriptSerializer jss = new JavaScriptSerializer (); context. response. write (jss. serialize (categoryinfo_list); // Serialize the object set as a javascript Object }}

The WSXFY.htm code is as follows:

<Head> <title> refreshing pagination </title> <script type = "text/javascript" src = ".. /Scripts/jquery-1.5.1.min.js "> </script> <script type =" text/javascript "> $ (function () {$. post ("PagedService. ashx ", {" Action ":" GetPageCount "}, function (response, status) {for (var I = 1; I <= response; I ++) {var td = $ ("<td> <a href =''> "+ I +" </a> </td> "); $ ("# trPage "). append (td); td. click (function (e) {e. preventDefault (); // do not direct the link $. post ("PagedService. ashx ", {" Action ":" GetPageData "," PageNum ": $ (this ). text ()}, function (response, status) {var categorys = $. parseJSON (response); $ ("# ulCategory "). empty (); for (var I = 0; I <categorys. length; I ++) {var category = categorys [I]; var li = $ ("<li>" + category. categoryInfoID + "-" + category. categoryName + "</li>"); $ ("# ulCategory "). append (li );}});});}});}); </script> 
The above is all the content in this article, hoping to help you achieve the paging effect.
Articles you may be interested in:

 

 
  
Search and paging effects implemented by jquery + json
 
  
Implementation Code of Jquery + JSon without refreshing Paging
 
  
No-refreshing paging Code implemented by JQuery and JSon
 
  
Code for efficient paging Based on Jquery + Ajax + Json
 
  
Jquery. pagination + JSON implementation code for dynamic and non-Refresh Paging
 
  
JQuery getJSON () +. ashx implement paging (Community version)
 
  
Sample Code for data list paging using jquery + json
 
  
Use Jquery + Ajax + Json in asp.net to implement instance code without refreshing pages
 
  
Display by Page Based on Jquery + Ajax + Json
 
  
How to Implement paging display using Jquery + Ajax + Json with JAVA + JQuery for asynchronous Paging