jquery+json实现分页效果
son作为一种轻量级的数据交换格式,由于其传输数据格式的方便性,今天偶然想将其应用于分页实现,分页做为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;}{"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}$.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对象 } } <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实现分页效果的更多相关文章
- jquery自定义插件实现分页效果
这节介绍如何自定义jquery插件,实现分页效果,话不多说,先看看实现的效果: 分页插件 实现的代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTM ...
- 分享5种风格的 jQuery 分页效果【附代码】
jPaginate 是一款非常精致的分页插件,提供了五种不同风格的分页效果,支持鼠标悬停翻页,快速分页功能.这款插件还提供了丰富的配置选项,你可以根据需要进行设置. 效果演示 源码下载 各个 ...
- Json 基于jQuery+JSON的省市联动效果
helloweba.com 作者:月光光 时间:2012-09-12 21:57 标签: jQuery JSON Ajax 省市联动 省市区联动下拉效果在WEB中应用非常广泛,尤其在一些 ...
- 5种风格的 jQuery 分页效果【附代码】
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...
- 基于jquery 的分页插件,前端实现假分页效果
上次分享了一款jquery插件,现在依旧分享这个插件,不过上一次分享主要是用于regular框件,且每一页数据都是从后端获取过来的,这一次的分享主要是讲一次性获取完数据 然后手动进行分页.此需求基本上 ...
- 基于Jquery+Ajax+Json实现分页显示
1.后台action产生json数据. List blackList = blackService.getBlackInfoList(mobileNum, gatewayid, startDate, ...
- 使用Jquery做分页效果
之前写过一个PHP 的分页效果,但是今天小伙伴和我说了一个不适用后台单纯用前段的JS来写分页,整理了一下,代码如下: html: <div id="containet"> ...
- thinkphp ajax 无刷新分页效果的实现
思路:先做出传统分页效果,然后重新复制一份Page.class.php类,对它进行修改,把js中的函数传到page类中,把上一页.下一页.首页.尾页.链接页中的url地址改成js控制的函数,模板页面中 ...
- 源码来袭!!!基于jquery的ajax分页插件(demo+源码)
前几天打开自己的博客园主页,无意间发现自己的园龄竟然有4年之久了.可是看自己的博客列表却是空空如也,其实之前也有写过,但是一直没发布(然而好像并没有什么卵用).刚开始学习编程时就接触到博客园,且在博客 ...
随机推荐
- sqlalchemy使用
1.SQLAlchemy的作用 ORM对象关系映射技术 2.SQLAlchemy安装 pip install SQLAlchemy 查看SQLAlchemy版本 3.生成数据库连接 from sqla ...
- Python中if __name__ == '__main__':作用
#hello.pydef sayHello(): str="hello" print(str); if__name__=="__main__": print ( ...
- VC中的树形控件
树形控件可以显示出各项之间的层次关系,因此在VC中很常用. 1.树形控件的常用风格 TVS_HASBUTTONS 在父项目前显示+.-.用户可以通过点击该符号来打开或收起子项 TVS_HASLINES ...
- 【转】MySQL索引原理及慢查询优化
MySQL凭借着出色的性能.低廉的成本.丰富的资源,已经成为绝大多数互联网公司的首选关系型数据库.虽然性能出色,但所谓“好马配好鞍”,如何能够更好的使用它,已经成为开发工程师的必修课,我们经常会从职位 ...
- 在哪个web.xml中配置welcome页面
是在tomcat的web.xml中配置,而不是在你的%web-project-root%/WEB-INF/web.xml中! 示例 <welcome-file-list> <welc ...
- thrift学习之一-------介绍
thrift 官网: http://thrift.apache.org/ Thrift是一个软件框架,用于支持可扩展的跨语言服务的开发,它无缝的与C++,Java,Python,PHP,Ruby,E ...
- JavaScrip——练习(求整数和、求整数积)
用HTML和JSp来实现 1.HTML调用JSp语法:<script type="text/javascript" src="整数和jsp.js"> ...
- TCPdump抓包命令详解
http://starsliao.blog.163.com/blog/static/89048201062333032563/ TCPdump抓包命令 tcpdump是一个用于截取网络分组,并输出分组 ...
- 【SpringMVC笔记】第三课 处理器映射器+处理器适配器
第二课的例子中,在springmvc.xml中配置使用了第一种处理器映射器和处理器适配器,如下所示. <!-- 配置第一种处理器映射器 BeanNameUrlHandlerMapping --& ...
- CentOs6.5 安装rabbitmq(转)
// 安装预环境 yum install gcc gcc-c++ yum install zlib zlin-devel ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 / ...