Jquery+json to achieve paging effect

Son as a lightweight data interchange format, due to the convenience of its transmission data format, today accidentally want to apply it to the paging implementation, paging as a web development a long-term topic, its application of efficiency and importance is not much to say
The main techniques in this paper are: Reflection mechanism, JSON data format, jquery
For the versatility of the application, it is first necessary to convert any type of result object that will be returned to a JSON-type format based on the reflection mechanism.

public static String toJSON(Object obj) { HashMap map = new HashMap(); Class c = obj.getClass(); // 利用反射机 制，把里面所有的属性，反射出来使用，这样放入任何一个对象， 都可以找到他们的属性， // 把这些属性的名，和属性的值，封装成一个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) { } } / / 把map对象变成字符串 // 这些格式还需要把=变成: String s = map.toString(); / /System.out.println(s); String str = s.replaceAll( "" = ", " ":" ); //System.out.println(str); return str; }After converting multiple objects that are to be returned to JSON-type objects, finally add paging information and eventually convert multiple JSON strings into an 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 receives the data of the object, which allows the foreground style to be separated from the background data, which simplifies the code $.getJSON( "result.jsp?page=" +p, function (json) { $( "#show" ).html( "<tr><th>用户ID</th><th>用户名</th><th>用户年龄</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" ]); });

Use jquery and JSON to implement the no-refresh paging code, the code is as follows

Four files required
An entity class file CategoryInfoModel.cs
A SQLHelper SQLHelper.cs
An AJAX server-side handler Pagedservice.ashx
A client Invoke page wsxfy.htm
CategoryInfoModel.cs and SQLHelper.cs, I don't write, I know what the papers are.
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"]; //取页数 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); }//取每页数据 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 >();//定义实体集合 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));//序列化实体集合为javascript对象 } } The wsxfy.htm code is as follows < head > < title >无刷新分页</ 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(); //不要导向链接 $.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 > </ head > < body > < ul id = "ulCategory" ></ ul > < table > < tr id = "trPage" > </ tr > </ table > </ body > </ html >

Jquery+json to achieve paging effect