jquery+json实现分页效果

Json作为一种轻量级的数据交换格式,由于其传输数据格式的方便性,今天偶然想将其应用于分页实现,分页做为web开发一个长久的话题,其应用的高效与重要性就不多说了
本文主要技术:反射机制,Json数据格式,jquery
为了应用的通用性,首先要根据反射机制,能将要返回的任意类型的结果对象转化成Json类型的格式。

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; }

将要返回的多个对象转换成Json类型的对象后,最后应加上分页的信息,最终将多个Json字符串,转化成一整个Json类型

{"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}

当信息发送到客户端时 ,只用jquery接收对象的数据就行了 ,这样 可以实现前台的样式与后台传送的数据分离,更加简化了代码

$.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"]); });

利用JQuery与JSon实现的无刷新分页代码,具体代码如下

需要四个文件
一个实体类文件 CategoryInfoModel.cs
一个SqlHelper SQLHelper.cs
一个AJAX服务端处理程序 PagedService.ashx
一个客户端调用页面 WSXFY.htm
CategoryInfoModel.cs和SQLHelper.cs我就不写了,都知道是什么文件
PagedService.ashx 代码如下

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对象 } }

WSXFY.htm 代码如下

<head> <title>无刷新分页</title> <script type="text/javascript" src="https://www.jb51.net/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></ul> <table> <tr> </tr> </table> </body> </html>

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wgyffs.html