jquery+json은 페이징 효과를 달성합니다

jquery+json은 페이징 효과를 달성합니다_jquery

WBOY

풀어 주다： 2016-05-16 15:11:43

원래의

1553명이 탐색했습니다.

Json은 데이터 전송이 편리하기 때문에 우연히 페이징 구현에 적용하고 싶은 경량 데이터 교환 형식입니다. 페이징은 웹 개발에서 오랫동안 지속되어 온 주제이며 그 적용이 효율적이고 중요합니다. 섹스에 관해서는 별로 할 말이 없습니다
이 글의 주요 기술: 반사 메커니즘, 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&#63;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을 사용하여 구현한 새로 고침 없는 페이징 코드는 다음과 같습니다

4개의 파일이 필요합니다
엔터티 클래스 파일 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>

로그인 후 복사

위 내용은 이 글의 전체 내용이며, 페이징 효과를 얻는 데 도움이 되기를 바랍니다.