jquery+json实现分页效果
Json作为一种轻量级的数据交换格式,由于其传输数据格式的方便性，今天偶然想将其应用于分页实现，分页做为web开发一个长久的话题，其应用的高效与重要性就不多说了
本文主要技术:反射机制，Json数据格式，jquery
为了应用的通用性，首先要根据反射机制，能将要返回的任意类型的结果对象转化成Json类型的格式。
publicstaticStringtoJSON(Objectobj){
HashMapmap=newHashMap();
Classc=obj.getClass();
//利用反射机制，把里面所有的属性，反射出来使用，这样放入任何一个对象，都可以找到他们的属性，
//把这些属性的名，和属性的值，封装成一个map里，
Field[]fields=c.getDeclaredFields();
for(inti=0;i<fields.length;i++){
Stringname=fields[i].getName();
try{
fields[i].setAccessible(true);
Objecto=fields[i].get(obj);
if(oinstanceofNumber){
map.put("""+name+""",o.toString());
}elseif(oinstanceofString){
map.put("""+name+""","""+o.toString()+""");
}
}catch(IllegalArgumentExceptione){
}catch(IllegalAccessExceptione){
}
}
//把map对象变成字符串
//这些格式还需要把=变成:
Strings=map.toString();
//System.out.println(s);
Stringstr=s.replaceAll(""=","":");
//System.out.println(str);
returnstr;
}
将要返回的多个对象转换成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(vari=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
一个SqlHelperSQLHelper.cs
一个AJAX服务端处理程序PagedService.ashx
一个客户端调用页面WSXFY.htm
CategoryInfoModel.cs和SQLHelper.cs我就不写了，都知道是什么文件
PagedService.ashx代码如下
usingSystem.Web.Script.Serialization;
publicvoidProcessRequest(HttpContextcontext)
{
context.Response.ContentType="text/plain";
stringstrAction=context.Request["Action"];
//取页数
if(strAction=="GetPageCount")
{
stringstrSQL="SELECTCOUNT(*)FROMCategoryInfo";
intintRecordCount=SqlHelper.ExecuteScalar(strSQL);
intintPageCount=intRecordCount/10;
if(intRecordCount%10!=0)
{
intPageCount++;
}
context.Response.Write(intPageCount);
}//取每页数据
elseif(strAction=="GetPageData")
{
stringstrPageNum=context.Request["PageNum"];
intintPageNum=Convert.ToInt32(strPageNum);
intintStartRowIndex=(intPageNum-1)*10+1;
intintEndRowIndex=(intPageNum)*10+1;
stringstrSQL="SELECT*FROM(SELECTID,CategoryName,Row_Number()OVER(ORDERBYIDASC)ASrownumFROMCategoryInfo)ASt";
strSQL+="WHEREt.rownum>="+intStartRowIndex+"ANDt.rownum<="+intEndRowIndex;
DataSetds=newDataSet();
SqlConnectionconn=SqlHelper.GetConnection();
ds=SqlHelper.ExecuteDataset(conn,CommandType.Text,strSQL);
List<CategoryInfoModel>categoryinfo_list=newList<CategoryInfoModel>();//定义实体集合
for(inti=0;i<ds.Tables[0].Rows.Count;i++)
{
CategoryInfoModelcategoryinfo=newCategoryInfoModel();
categoryinfo.CategoryInfoID=Convert.ToInt32(ds.Tables[0].Rows[i]["ID"]);
categoryinfo.CategoryName=ds.Tables[0].Rows[i]["CategoryName"].ToString();
categoryinfo_list.Add(categoryinfo);
}
JavaScriptSerializerjss=newJavaScriptSerializer();
context.Response.Write(jss.Serialize(categoryinfo_list));//序列化实体集合为javascript对象
}
}
WSXFY.htm代码如下
<head>
<title>无刷新分页</title>
<scripttype="text/javascript"src="../Scripts/jquery-1.5.1.min.js"></script>
<scripttype="text/javascript">
$(function(){
$.post("PagedService.ashx",{"Action":"GetPageCount"},function(response,status){
for(vari=1;i<=response;i++){
vartd=$("<td><ahref=''>"+i+"</a></td>");
$("#trPage").append(td);
td.click(function(e){
e.preventDefault();//不要导向链接
$.post("PagedService.ashx",{"Action":"GetPageData","PageNum":$(this).text()},function(response,status){
varcategorys=$.parseJSON(response);
$("#ulCategory").empty();
for(vari=0;i<categorys.length;i++){
varcategory=categorys[i];
varli=$("<li>"+category.CategoryInfoID+"-"+category.CategoryName+"</li>");
$("#ulCategory").append(li);
}
});
});
}
});
});
</script>
</head>
<body>
<ulid="ulCategory"></ul>
<table>
<trid="trPage">
</tr>
</table>
</body>
</html>
以上就是本文的全部内容，希望能够帮助大家实现分页效果。