jquery+json實現(xiàn)分頁效果
Json作為一種輕量級的數(shù)據(jù)交換格式,由于其傳輸數(shù)據(jù)格式的方便性,今天偶然想將其應用于分頁實現(xiàn),分頁做為web開發(fā)一個長久的話題,其應用的高效與重要性就不多說了
本文主要技術:反射機制,Json數(shù)據(jù)格式,jquery
為了應用的通用性,首先要根據(jù)反射機制,能將要返回的任意類型的結果對象轉化成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}
當信息發(fā)送到客戶端時 ,只用jquery接收對象的數(shù)據(jù)就行了 ,這樣 可以實現(xiàn)前臺的樣式與后臺傳送的數(shù)據(jù)分離,更加簡化了代碼
$.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實現(xiàn)的無刷新分頁代碼,具體代碼如下
需要四個文件
一個實體類文件 CategoryInfoModel.cs
一個SqlHelper SQLHelper.cs
一個AJAX服務端處理程序 PagedService.ashx
一個客戶端調(diào)用頁面 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"]; //取頁數(shù) 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); }//取每頁數(shù)據(jù) 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>
以上就是本文的全部內(nèi)容,希望能夠幫助大家實現(xiàn)分頁效果。
- JavaScript實現(xiàn)列表分頁功能特效
- js腳本分頁代碼分享(7種樣式)
- 純javascript實現(xiàn)分頁(兩種方法)
- ANGULARJS中使用JQUERY分頁控件
- JSP+EXt2.0實現(xiàn)分頁的方法
- JSP實現(xiàn)的簡單分頁示例
- 使用Jquery+Ajax+Json如何實現(xiàn)分頁顯示附JAVA+JQuery實現(xiàn)異步分頁
- JSP實現(xiàn)的簡單分頁顯示效果代碼
- JSP通用分頁框架
- jquery分頁插件jquery.pagination.js使用方法解析
- jquery分頁插件jquery.pagination.js實現(xiàn)無刷新分頁
- Angular.js與Bootstrap相結合實現(xiàn)表格分頁代碼
- js實現(xiàn)ajax分頁完整實例
- js多功能分頁組件layPage使用方法詳解
- 基于Vue.js的表格分頁組件
- 純JS前端實現(xiàn)分頁代碼
相關文章
Jquery easyui 實現(xiàn)動態(tài)樹
本文給大家介紹jquery easyui實現(xiàn)動態(tài)樹,本文通過代碼實例相結合的方式給大家展示jquery easyui實現(xiàn)動態(tài)樹的過程,感興趣的朋友一起學習吧2015-11-11JQUERY 獲取IFrame中對象及獲取其父窗口中對象示例
經(jīng)常會用到iframe,難免會碰到需要在父窗口中使用iframe中的元素、或者在iframe框架中使用父窗口的元素,下面為大家簡單介紹下本人的使用心得2013-08-08jQuery插件FusionWidgets實現(xiàn)的AngularGauge圖效果示例【附demo源碼】
這篇文章主要介紹了jQuery插件FusionWidgets實現(xiàn)的AngularGauge圖效果,結合具體實例形式分析了jQuery使用FusionWidgets插件載入xml數(shù)據(jù)實現(xiàn)AngularGauge圖的相關操作技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2017-03-03jQuery Selectors(選擇器)的使用(七、子元素篇)
本系列文章主要講述jQuery框架的選擇器(Selectors)使用方法,我將以實例方式進行講述,以簡單,全面為基礎,不會涉及很深,我的學習方法:先入門,后進階!2009-12-12