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实现tab标签浏览效果
Feb 20 Javascript
基于Asp.net与Javascript控制的日期控件
May 22 Javascript
JSON 数字排序多字段排序介绍
Sep 18 Javascript
jQuery控制div实现随滚动条滚动效果
Jun 07 Javascript
将List对象列表转换成JSON格式的类实现方法
Jul 04 Javascript
ajax接收后台数据在html页面显示
Feb 19 Javascript
underscore之Chaining_动力节点Java学院整理
Jul 10 Javascript
JS使用贪心算法解决找零问题示例
Nov 27 Javascript
快速解决处理后台返回json数据格式的问题
Aug 07 Javascript
JavaScript常用工具方法封装
Feb 12 Javascript
vue 项目打包时样式及背景图片路径找不到的解决方式
Nov 12 Javascript
Vue中的nextTick作用和几个简单的使用场景
Jan 25 Vue.js
利用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的知识
2006/11/17 PHP
php文件怎么打开 如何执行php文件
2011/12/21 PHP
php+ajax无刷新分页实例详解
2015/12/07 PHP
深入讲解PHP的Yii框架中的属性(Property)
2016/03/18 PHP
php静态成员方法和静态的成员属性的使用方法
2017/10/26 PHP
在云虚拟主机部署thinkphp5项目的步骤详解
2017/12/21 PHP
JavaScript 指导方针
2007/04/05 Javascript
Javascript JSQL,SQL无处不在,
2010/05/05 Javascript
一个收集图片的bookmarlet(js 刷新页面中的图片)
2010/05/27 Javascript
JavaScript 页面编码与浏览器类型判断代码
2010/06/03 Javascript
Tab页界面 用jQuery及Ajax技术实现(php后台)
2011/10/12 Javascript
js操作iframe兼容各种主流浏览器示例代码
2013/07/22 Javascript
Extjs改变树节点的勾选状态点击按钮将复选框去掉
2013/11/14 Javascript
DOM基础教程之使用DOM + Css
2015/01/20 Javascript
javascript类型系统 Window对象学习笔记
2016/01/07 Javascript
JavaScript实现拖拽元素对齐到网格(每次移动固定距离)
2016/11/30 Javascript
jquery.validate表单验证插件使用详解
2017/06/21 jQuery
vue登录注册及token验证实现代码
2017/12/14 Javascript
axios+Vue实现上传文件显示进度功能
2019/04/14 Javascript
基于vue的tab-list类目切换商品列表组件的示例代码
2020/02/14 Javascript
jquery实现垂直手风琴菜单
2020/03/04 jQuery
[01:29]Ti4循环赛第三日精彩回顾
2014/07/13 DOTA
Python+OpenCV图片局部区域像素值处理详解
2019/01/23 Python
python递归法实现简易连连看小游戏
2020/03/25 Python
python利用xlsxwriter模块 操作 Excel
2020/10/14 Python
全球速卖通巴西站点:Aliexpress巴西
2016/08/24 全球购物
MATCHESFASHION.COM美国官网:英国奢侈品零售商
2018/10/29 全球购物
美国沃尔玛网上超市:Walmart
2020/08/14 全球购物
班级文化建设标语
2014/06/23 职场文书
2014年挂职干部工作总结
2014/12/06 职场文书
倡议书作文
2015/01/19 职场文书
病假证明模板
2015/06/19 职场文书
关于五一放假的通知
2015/08/18 职场文书
Python中使用subprocess库创建附加进程
2021/05/11 Python
JavaWeb 入门篇(3)ServletContext 详解 具体应用
2021/07/16 Java/Android
Java8中Stream的一些神操作
2021/11/02 Java/Android