jquery+json实现分页效果
来源: 阅读:621 次 日期:2016-07-22 16:04:16
温馨提示: 小编为您整理了“jquery+json实现分页效果”,方便广大网友查阅!

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>

以上就是本文的全部内容,希望能够帮助大家实现分页效果。

更多信息请查看网络编程
手机网站地址:jquery+json实现分页效果
由于各方面情况的不断调整与变化, 提供的所有考试信息和咨询回复仅供参考,敬请考生以权威部门公布的正式信息和咨询为准!
关于我们 | 联系我们 | 人才招聘 | 网站声明 | 网站帮助 | 非正式的简要咨询 | 简要咨询须知 | 加入群交流 | 手机站点 | 投诉建议
工业和信息化部备案号:滇ICP备2023014141号-1 云南省教育厅备案号:云教ICP备0901021 滇公网安备53010202001879号 人力资源服务许可证:(云)人服证字(2023)第0102001523号
云南网警备案专用图标
联系电话:0871-65317125(9:00—18:00) 获取招聘考试信息及咨询关注公众号:hfpxwx
咨询QQ:526150442(9:00—18:00)版权所有:
云南网警报警专用图标
Baidu
map