jquery+json实现分页效果


Posted in Javascript onMarch 07, 2016

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>

以上就是本文的全部内容,希望能够帮助大家实现分页效果。

Javascript 相关文章推荐
jQuery 常见开发使用技巧总结
Dec 26 Javascript
jQuery基本选择器选择元素使用介绍
Apr 18 Javascript
JS过滤url参数特殊字符的实现方法
Dec 24 Javascript
js window.open弹出新的网页窗口
Jan 16 Javascript
Javascript获取表单名称(name)的方法
Apr 02 Javascript
Bootstrap Table使用方法详解
Aug 01 Javascript
AngularJs自定义服务之实现签名和加密
Aug 02 Javascript
分享十三个最佳JavaScript数据网格库
Apr 07 Javascript
Vue2.0父组件与子组件之间的事件发射与接收实例代码
Sep 19 Javascript
利用vue和element-ui设置表格内容分页的实例
Mar 02 Javascript
浅入深出Vue之自动化路由
Aug 06 Javascript
利用JavaScript的Map提升性能的方法详解
Aug 14 Javascript
利用JQuery写一个简单的异步分页插件
Mar 07 #Javascript
基于jquery编写分页插件
Mar 07 #Javascript
JavaScript快速切换繁体中文和简体中文的方法及网站支持简繁体切换的绝招
Mar 07 #Javascript
javascript特殊日历控件分享
Mar 07 #Javascript
基于JavaScript实现快速转换文本语言(繁体中文和简体中文)
Mar 07 #Javascript
论JavaScript模块化编程
Mar 07 #Javascript
js日期插件dateHelp获取本月、三个月、今年的日期
Mar 07 #Javascript
You might like
深入理解PHP类的自动载入机制
2016/09/16 PHP
PHP基于cookie实现统计在线人数功能示例
2019/01/16 PHP
PDO::commit讲解
2019/01/27 PHP
jQueryPad 实用的jQuery测试工具(支持IE,chrome,FF)
2010/05/22 Javascript
在IE浏览器中resize事件执行多次的解决方法
2011/07/12 Javascript
理解JAVASCRIPT中hasOwnProperty()的作用
2013/06/05 Javascript
jQuery仿Flash上下翻动的中英文导航菜单实例
2015/03/10 Javascript
Windows系统下使用Sublime搭建nodejs环境
2015/04/13 NodeJs
JavaScript脚本库编写的方法
2015/12/09 Javascript
jQuery Mobile 触摸事件实例
2016/06/04 Javascript
js上下视差滚动简单实现代码
2017/03/07 Javascript
微信小程序 聊天室简单实现
2017/04/19 Javascript
JavaScript正则表达式的贪婪匹配和非贪婪匹配
2017/09/05 Javascript
vue实现消息的无缝滚动效果的示例代码
2017/12/05 Javascript
解决vue 打包发布去#和页面空白的问题
2018/09/04 Javascript
vue forEach循环数组拿到自己想要的数据方法
2018/09/21 Javascript
详解Vue中组件的缓存
2019/04/20 Javascript
vue中利用simplemde实现markdown编辑器(增加图片上传功能)
2019/04/29 Javascript
vue路由守卫及路由守卫无限循环问题详析
2019/09/05 Javascript
谈谈node.js中的模块系统
2020/09/01 Javascript
Node.JS如何实现JWT原理
2020/09/18 Javascript
wxpython 最小化到托盘与欢迎图片的实现方法
2014/06/09 Python
用Python编写分析Python程序性能的工具的教程
2015/04/01 Python
Python入门教程之运算符与控制流
2016/08/17 Python
python逐行读写txt文件的实例讲解
2018/04/03 Python
pycharm 使用anaconda为默认环境的操作
2021/02/05 Python
CSS3 透明色 RGBA使用介绍
2013/08/06 HTML / CSS
泰国王权免税店官方网站:KingPower
2019/03/11 全球购物
日语专业毕业生自荐信
2013/11/11 职场文书
企业总经理职责
2014/02/02 职场文书
小学运动会口号
2014/06/07 职场文书
校园广播稿100字
2014/10/06 职场文书
2014年客服工作总结范文
2014/11/13 职场文书
手术室护士个人总结
2015/02/13 职场文书
2015年幼儿园卫生保健工作总结
2015/05/12 职场文书
win10安装配置nginx的过程
2021/03/31 Servers