基於Json的Ajax無重新整理分頁效果實現（一）

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

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

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

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

由於我今天剛好要做無重新整理分頁的效果。所以就直接先了！

，上部分是分頁後取出來的資料。下部分是 分頁器的實現（關於分頁器的實現請參考 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 的方式！