基於Json的Ajax無刷新分頁效果實現(一)


        看此文章之前請先查閱本人上一篇文章 

《類似baidu google分頁器效果的代碼(修改於 kwklover 同學基礎上)》    點擊穿越門

       上一篇文章中  在 kwklover 同學 的基礎上做了些許修正,不過我看着仍然不完善,大俠們可以留言補充!

       本篇主要是在上一篇的基礎上實現AJAX無刷新分頁,本人菜鳥一枚,代碼難免有bug。希望高手抓出來,先感謝!

由於我今天剛好要做無刷新分頁的效果。所以就直接先上圖了!

QQ截圖20110824131815

如圖,上部分是分頁后取出來的數據。下部分是 分頁器的實現(關於分頁器的實現請參考 http://www.cnblogs.com/zhouzhaokun/archive/2011/08/24/2151558.html

我們先來實現頁面的分頁效果,

1、新建一個 ajax 文件頁面  ashx 或者 aspx, 我個人比較喜歡 aspx 。刪掉頁面上的所有HTML代碼。只保留頁面聲明部分:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Ajax_GetDataCount.aspx.cs" Inherits="GSSS.HTML.UI.Ajax.Elec_Comment.Ajax_GetDataCount" %>

通過上邊的代碼,相信大家都能看到我新建的文件名 是 Ajax_GetDataCount.aspx .接下來我們看這個頁面的 .cs 文件

首先 在 page_load 事件中,我們獲取ajax傳送過來的參數。我采用 jquery 的 post 方式提交參數,代碼如下:

protected void Page_Load(object sender, EventArgs e)
{
int PageSize = 5;//寫死的頁面大小。可以通過傳參動態實現
int PageCount = 100;//測試用的數據條數(無用)
//讀取 post 過來的參數值 page 和 pid,pid 是對應的產品ID,本實例為產品評論的無刷新實現
string page = DotNet.Framework.Common.QueryString.F("page");
string pid = DotNet.Framework.Common.QueryString.F("pid");
if (pid != "")
{
GSSS.HTML.BLL.PromotionZone.ElectronicProducts.T_ElectronicProducts_Comment bll = new GSSS.HTML.BLL.PromotionZone.ElectronicProducts.T_ElectronicProducts_Comment();
//讀取pid產品的評論條數
PageCount = bll.GetPagerCount(Convert.ToInt32(pid));
}
if (page == "" && pid != "")
{
///創建並顯示分頁器
BuildPager(PageCount, 1, PageSize, Convert.ToInt32(pid));
}
if (page != "" && pid != "")
{
BuildPager(PageCount, Convert.ToInt32(page), PageSize, Convert.ToInt32(pid));
}
}

下邊是 分頁器的實現方法。跟上一篇文章還有所不同(我說過有bug嘛。。)在這里修正之后 還是有些小問題。。

代碼如下:

/// <summary>
/// 創建並顯示分頁器
/// </summary>
/// <param name="totalRecords">總頁數</param>
/// <param name="currentPage">當前頁碼</param>
/// <param name="pageSize">頁面大小</param>
private void BuildPager(int totalRecords, int currentPage, int pageSize, int productID)
{
int alter = 4;
int startPage = 1;
int endPage = currentPage + alter;
int totalPages = this.CalculateTotalPages(totalRecords, pageSize);

if (currentPage > alter)
{
startPage = currentPage - alter;
}

if (endPage > totalPages)
{
endPage = totalPages;
}
///分頁 頁碼 a 標簽 新增屬性 title 為了獲取點擊的頁碼
string strTemp = @"<a href='javascript:void(0)' title='{0}'>{1}</a>&nbsp;&nbsp;";
StringBuilder sb = new StringBuilder();
if (currentPage != startPage)
{
if (currentPage > startPage)
{
sb.Append(string.Format(strTemp, 1, "首頁"));
sb.Append(string.Format(strTemp, currentPage - 1, "上一頁"));
}
}

for (int i = startPage; i <= endPage; i++)
{
if (currentPage == i)
{
sb.Append("<font color=red>" + i + "</font>&nbsp;&nbsp;");

}
if (currentPage != i && currentPage > 1)
{
sb.Append(string.Format(strTemp, i, "[" + i + "]"));
}

}

if (currentPage != endPage && totalRecords != 0)
{
if (currentPage != totalPages)
sb.Append(string.Format(strTemp, currentPage + 1, "下一頁"));
sb.Append(string.Format(strTemp, totalPages, "尾頁"));
}

Response.Write(sb.ToString());
Response.End();
}

/**/
/// <summary>
/// 計算總頁數
/// </summary>
/// <param name="totalRecords">總記錄數</param>
/// <param name="pageSize">每頁記錄數</param>
private int CalculateTotalPages(int totalRecords, int pageSize)
{
int totalPagesAvailable;

totalPagesAvailable = totalRecords / pageSize;

//由於C#的整形除法 會把所有余數舍入為0,所以需要判斷是否需要加1
if ((totalRecords % pageSize) > 0)
totalPagesAvailable++;

return totalPagesAvailable;
}

 

這樣…ajax 請求頁面就完成了。接下來我們要把這個 頁面 拼出來的 頁碼顯示在頁面上。。當然這里沒有用到 json,代碼如下:

$.post("/Ajax/Elec_Comment/Ajax_GetDataCount.aspx", { pid: '<%=DotNet.Framework.Common.QueryString.QId("id") %>' }, function(data, status) {
$("#pager").html(data);
alert(data);
BindClick(); //給 a 標簽綁定 點擊事件
BindCommentList(1);//頁面加載默認綁定第一頁數據
});

 

 function BindClick() {
$("#pager a").click(
function(e) {
e.preventDefault(); //禁止導向連接
var url = "/Ajax/Elec_Comment/Ajax_GetDataCount.aspx";
var pid = '<%=DotNet.Framework.Common.QueryString.QId("id") %>';
var page = $(this).attr("title");
var func = function(data) {
$("#pager").html(data);
BindCommentList(page); //根據當前頁讀取數據
BindClick();//這里再調用一次綁定a標簽的click事件,如果不調用,頁面第一次打開可以分頁,以后就捕獲不到這個事件了。
}

$.post(url, { pid: pid, page: page }, func);
}
);
}
 
到這里,只用 jquery 的ajax 方式,我們已經可以在頁面上顯示 分頁頁碼了。。
有個面試,待會接着寫 數據的讀取。基於 json 的方式!

注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2021 ITdaan.com