DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> JQuery與JSon實現的無刷新分頁代碼
JQuery與JSon實現的無刷新分頁代碼
編輯:JQuery特效代碼     

如圖
而無刷新分頁可以解決這個問題,上面播放著視頻,下面我點下一頁看著評論,現在大部分的網站都是無刷新分頁。
源碼如下(我是采用一頁顯示10條記錄):
需要四個文件
一個實體類文件 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>

效果如下(頁面好不好看取決於你畫DOM 的水平了,我這裡只是簡單的畫了畫)

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved