jQuery實現定位滾動條位置
698
2024-02-22
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="http://www.gimoo.net/t/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 + 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>
以上就是本文的全部內容，希望能夠幫助大家實現分頁效果。
