正文
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;
}
将要返回的多个对象转换成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
>
