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年之久了.可是看自己的博客列表却是空空如也,其实之前也有写过,但是一直没发布(然而好像并没有什么卵用).刚开始学习编程时就接触到博客园,且在博客 ...
随机推荐
- 基于FPGA的异步FIFO设计
今天要介绍的异步FIFO,可以有不同的读写时钟,即不同的时钟域.由于异步FIFO没有外部地址端口,因此内部采用读写指针并顺序读写,即先写进FIFO的数据先读取(简称先进先出).这里的读写指针是异步的, ...
- 【Android】5.4 下拉框(Spinner)
分类:C#.Android.VS2015: 创建日期:2016-02-07 下拉列表框Spinner的用法和WinForms中ComboBox的用法非常相似,在Android应用中使用频次也相当高,因 ...
- UVA10519 - !! Really Strange !!(数论+高精度)
10519 - !! Really Strange !!(数论+高精度) option=com_onlinejudge&Itemid=8&category=24&page=sh ...
- ~function(){}() 和(function(){}){}
使用~function(){}()也是声明并调用函数的方法之一: 这是一段使用~function(){}()来声明函数并调用函数的例子: ~function() { alert(typeof next ...
- nyoj 504 课程设计
课程设计 时间限制:3000 ms | 内存限制:65535 KB 难度:2 描述 新学期伊始,Gangster 老师又在为如何给学生分配课程设计题目而犯愁,Gangster老师老共有 N 名学生 ...
- centos启动zookeeper
切换到zookeeper的bin目录下,执行 ./zkServer.sh start
- Ubuntu设置root密码
最初使用系统时,只有当前管理员的密码,root密码为随机生成的. 通过 sudo passwd 设置root密码,然后su获得root,也就是最高权限
- JAVA-JAVA、JavaScript、JavaWeb的关系
相关资料:1.http://www.cnblogs.com/youring2/archive/2013/06/06/3120645.html2.https://jingyan.baidu.com/ar ...
- docker探索-windows10 docker 使用 mysql(二)
转自:http://blog.csdn.net/daocaoren92wq/article/details/68484049$ docker pull mysql docker@default:~$ ...
- Clipboard获取内容C#
一.获取文本 textBox1.Text = Clipboard.GetData("Text").ToString(); 二.获取图像 pictureBo ...