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年之久了.可是看自己的博客列表却是空空如也,其实之前也有写过,但是一直没发布(然而好像并没有什么卵用).刚开始学习编程时就接触到博客园,且在博客 ...
随机推荐
- NEXYS 3开发板练手--USB UART(二)
上一篇文章中提到实际上我们操作的只是一个“伪”USB协议,我们真正需要完成的收发机遵循的协议应该是异步串行通信协议.这个协议对于大家来说应该是再熟悉不过了,在这里我就不多废话了.需要说明的是,我在这个 ...
- 并行开发系列 Plinq等
http://www.cnblogs.com/huangxincheng/archive/2012/04/03/2430638.html
- 【Android】17.1 Bound Services基本概念
分类:C#.Android.VS2015: 创建日期:2016-03-03 一.Bound Services—被绑定的服务 1.什么是Bound Service Bound Service是指通过接口 ...
- python定制类详解
1.什么是定制类python中包含很多内置的(Built-in)函数,异常,对象.分别有不同的作用,我们可以重写这些功能. 2.__str__输出对象 class Language(object): ...
- 内存单元,CPU对存储器的读写,三大总线
.存储单元 存储器被分成若干个存储单元,每个存储单元从0开始顺序编号.电子计算机的最小信息单位是bit.8个bit组成一个Byte(虽然现在一个字节可能不是8位,有宽字符出现了,但是一般我们的机器都是 ...
- 一款基于jquery的手风琴图片展示效果
今天要给大家分享一款基于jquery的手风琴图片展示效果.这款图片的展示效果鼠标经过前是灰色的,当鼠标经过时图片变大且变为彩色.效果图如下: 在线预览 源码下载 实现的代码. html代码: &l ...
- hibernate里联合主键composite-id映射,查询单个主键的问题
今天项目中遇到这个问题,搞了大半天,现在记录下来hibernate里联合主键配置(多个字段一起作为主键) <class name="com.cskj.hibernate.map.BbW ...
- C语言 · 最大最小公倍数
算法训练 最大最小公倍数 时间限制:1.0s 内存限制:256.0MB 锦囊1 使用贪心来选择. 锦囊2 当n为奇数时,答案一定是n*(n-1)*(n-2). 当n为偶数时,答案 ...
- buildroot 制作的文件系统烧入到nand中打开设备没有权限
利用buildroot 制作的文件系统,启动系统加载文件系统后出现打开设备Permission denied 解决方法记录. 这应该是制作文件系统的机制问题,暂时没有搞清楚为什么. 解决方式: 给生成 ...
- Android——通知 Notification
链接:http://jingyan.baidu.com/article/77b8dc7fde875a6175eab641.html http://www.2cto.com/kf/201502/3749 ...