首頁 > 開發者 > JavaScript
jquery+json實現分頁效果，jqueryjson實現分頁
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="../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>
以上就是本文的全部內容，希望能夠協助大家實現分頁效果。
您可能感興趣的文章: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
