Asp.Net分頁方法：JQuery外掛程式實現Ajax無重新整理分頁、AspNetPager分頁控制項實現分頁

一、使用JQuery外掛程式pagination實現AJax無重新整理分頁：

以下只列出主要代碼及注釋，詳細請參考最後源碼：

我們需要用到的檔案有：jquery.js，jquery.pagination.js，pagination.css

以及用於將DataTable轉換為Json的外掛程式Newtonsoft.Json.Net20.dll，檔案在包含在最下面的源檔案中

分頁預存程序：

SET ANSI_NULLS ONGOSET QUOTED_IDENTIFIER ONGO-- =============================================-- Author:餘泳彬-- Create date: 2011-01-15 12:59-- Description:分頁，用到了ROW_NUMBER()-- =============================================create PROCEDURE [dbo].[proc_FenYe]@tblName   varchar(255),       -- 表名@strFields varchar(1000) = '*', -- 需要返回的列，預設*@strOrder varchar(255)='',      -- 排序的欄位名，必填@strOrderType varchar(10)='ASC', -- 排序的方式,預設ASC@PageSize   int = 10,          -- 頁尺寸,預設10@PageIndex int = 1,           -- 頁碼,預設1@strWhere varchar(1500) = '' -- 查詢條件 (注意: 不要加 where)ASdeclare @strSQL   varchar(5000)if @strWhere !=''set @strWhere=' where '+@strWhereset @strSQL='SELECT * FROM ('+'SELECT ROW_NUMBER() OVER (ORDER BY '+@strOrder+' '+@strOrderType+') AS pos,'+@strFields+' '+'FROM '+@tblName+' '+@strWhere+') AS sp WHERE pos BETWEEN '+str((@PageIndex-1)*@PageSize+1)+' AND '+str(@PageIndex*@PageSize)exec (@strSQL)

資料訪問層主要函數：取出分頁資料及計算總條數（主要看傳的什麼參數即可）

/// <summary>分頁擷取資料列表(所有欄位+類名)</summary>/// <param name="order">排序欄位</param>/// <param name="ordertype">排序類型:desc或asc</param>/// <param name="PageSize">頁大小</param>/// <param name="PageIndex">頁索引</param>/// <param name="strWhere">條件</param>/// <returns></returns>public DataSet GetList(string order, string ordertype, int PageSize, int PageIndex, string strWhere){    Database db = DatabaseFactory.CreateDatabase();    DbCommand dbCommand = db.GetStoredProcCommand("proc_FenYe");    db.AddInParameter(dbCommand, "tblName", DbType.AnsiString, "News");    db.AddInParameter(dbCommand, "strFields", DbType.AnsiString, "*");    db.AddInParameter(dbCommand, "PageSize", DbType.Int32, PageSize);    db.AddInParameter(dbCommand, "PageIndex", DbType.Int32, PageIndex);    db.AddInParameter(dbCommand, "strOrder", DbType.String, order);    db.AddInParameter(dbCommand, "strOrderType", DbType.String, ordertype);    db.AddInParameter(dbCommand, "strWhere", DbType.AnsiString, strWhere);    return db.ExecuteDataSet(dbCommand);}/// <summary>計算記錄數</summary>/// <param name="strWhere">條件</param>/// <returns></returns>public int CalcCount(string strWhere){    string sql = "select count(1) from News";    if (!string.IsNullOrEmpty(strWhere))    {        sql += " where " + strWhere;    }    Database db = DatabaseFactory.CreateDatabase();    DbCommand dbCommand = db.GetSqlStringCommand(sql);    return int.Parse(db.ExecuteScalar(dbCommand).ToString());}

下面為主要代碼：

1、頁面引入JS及CSS

<script src="js/jquery-1.4.2.js" type="text/javascript"></script><script src="js/jquery.pagination.js" type="text/javascript"></script><link href="Css/pagination.css" rel="stylesheet" type="text/css" /><script src="js/NewsAjaxPager.js" type="text/javascript"></script>

2、頁面Html代碼

<!--內容列表--!><ul id="PageContain" class="newslist">    <!--載入圖片--!>    <li id="loadImg" style=" width:100%; height:60px;text-align:center; margin-top:50px;"><img src="images/loading1.gif"></li>    <!--內容會動態輸出到這裡面--!></ul><!--頁碼，id不能改--!><div id="Pagination" class="digg" ></div>

3、一般處理常式頁面GetNewsList.ashx，根據條件取出分頁資料及總條數

<%@ WebHandler Language="C#" Class="GetNewsList" %>using System;using System.Web;using System.Data;/// <summary>/// 擷取新聞列表，用於列表頁AJAX分頁及總條數/// </summary>public class GetNewsList : IHttpHandler{    DAl.NewsDAO newsDao = new DAl.NewsDAO();    DAl.ProductCategoryDAO catDao = new DAl.ProductCategoryDAO();    public void ProcessRequest(HttpContext context)    {        context.Response.ContentType = "text/plain";        string action = context.Request["action"];        if (action == "pager") // 取出分頁列表        {            // 排序欄位            string order = context.Request["order"].ToString().Trim();            string orderType = context.Request["orderType"].ToString().Trim();            // 頁大小            string pageSizeStr = context.Request["pageSize"].ToString().Trim();            int pageSize;            int.TryParse(pageSizeStr, out pageSize);            if (pageSize == 0)            {                pageSize = 10;            }            // 頁索引            string pageIndexStr = context.Request["pageIndex"].ToString().Trim();            int pageIndex;            int.TryParse(pageIndexStr, out pageIndex);            if (pageIndex == 0)            {                pageIndex = 1;            }            // 提取資料            DataTable dt = newsDao.GetList(order, orderType, pageSize, pageIndex, StrWhere(context)).Tables[0];            // 講DataTable轉換為Json            string jsonDate = Common.WebHelper.DataTableToJSON(dt, "ListData");            context.Response.Write(jsonDate);        }        else if (action == "pageCount")  // 擷取總條數        {            context.Response.Write(newsDao.CalcCount(StrWhere(context)));        }    }    /// <summary>    ///  查詢條件    /// </summary>    private string StrWhere(HttpContext context)    {        string strWhere = "IsShow='1'";        string Id = context.Request["cid"].ToString().Trim();        if (!string.IsNullOrEmpty(Id)&&Common.WebHelper.IsPosInt(Id))        {            catDao.GetAllChildCatId(Id, ref Id);            strWhere += "and CategoryID in (" + Id + ")"; // ref Id        }        return strWhere;    }    public bool IsReusable    {        get        {            return false;        }    }}

DataTable轉換為Json的函數

/* * 建立人：餘泳彬 * 建立時間：2011-1-17 9:59:50 * 說明：網站協助類(常用通用類) * 著作權：餘泳彬 */using System;using System.Collections.Generic;using System.Text;using System.Security.Cryptography;using System.Text.RegularExpressions;using System.Web;using System.Web.UI;using System.Web.UI.WebControls;using System.Data;using System.IO;using Newtonsoft.Json; // 需先添加引用namespace Common{    /// <summary>網站協助類</summary>    public class WebHelper    {        /// <summary>將DateTable轉為Json格式資料</summary>        /// <param name="dt">要轉換的DataTable名稱</param>        /// <param name="dtName">應該是轉換後的Key如用Json.dtName得到資料</param>        /// <returns></returns>        public static string DataTableToJSON(DataTable dt, string dtName)        {            StringBuilder sb = new StringBuilder();            StringWriter sw = new StringWriter(sb);            using (JsonWriter jw = new JsonTextWriter(sw))            {                JsonSerializer ser = new JsonSerializer();                jw.WriteStartObject();                jw.WritePropertyName(dtName);                jw.WriteStartArray();                foreach (DataRow dr in dt.Rows)                {                    jw.WriteStartObject();                    foreach (DataColumn dc in dt.Columns)                    {                        jw.WritePropertyName(dc.ColumnName);                        ser.Serialize(jw, dr[dc].ToString());                    }                    jw.WriteEndObject();                }                jw.WriteEndArray();                jw.WriteEndObject();                sw.Close();                jw.Close();            }            return sb.ToString();        }    }}

4、★主要的JS代碼：(Ajax取出分頁資料、總條數、綁定分頁控制項，講分頁資料HTML輸出到前台)

/* * 餘泳彬 2011-3-22 * 利用Jquery的jquery.pagination.js外掛程式進行Ajax分頁*/$(function() {    // 擷取Url中的類別ID參數(logcheck.js)    var CatId = GetQueryString("cid");    // 計算分頁總條數    var pageCount = 0;    $.ajax({        type: "POST",        cache: false,        async: false,        dataType: "text",        url: "Handler/GetNewsList.ashx",        data: "action=pageCount&cid=" + CatId,        success: function(data) {            pageCount = data;            //alert(pageCount);        }    });    // 初始化資料(顯示第一頁)    InitData(CatId, "CreateDate", "Desc", 20, 0, pageCount);    //處理翻頁,page_id為當前頁索引(0為第一頁)    function pageselectCallback(page_id, jq) {        //alert(page_id);        InitData(CatId, "CreateDate", "Desc", 20, page_id, pageCount);    }    // ★分頁主函數(新聞類別ID，排序欄位，排序類型，頁大小，頁索引，總條數)    function InitData(CatId, order, ordertype, PageSize, pageindx, pageCount) {        // Ajax取出分頁列表資料        $.ajax({            type: "POST",            cache: false,            dataType: "json", // 資料格式:JSON            url: "Handler/GetNewsList.ashx",            data: "action=pager&cid=" + CatId + "&order=" + order + "&orderType=" + ordertype + "&pageSize=" + PageSize + "&pageIndex=" + (pageindx + 1),            // 發送資料之前顯示Loading圖片，接收結束後隱藏            beforeSend: function() { $("#loadImg").show(); $("#Pagination").hide() }, // 發送資料之前            complete: function() { $("#loadImg").hide(); $("#Pagination").show() }, // 接收資料完畢            // Ajax成功            success: function(json) {                var listDate = json.ListData;                var html = "";                $.each(listDate, function(i, n) {                    html += "<li class=\"b\"><span class=\"title\"><a href=\"newscontent.aspx?id=" + n.Id + "%>\" class=\"typelink\"  target=\"_blank\">" + n.LongTitle + "</a></span><span class=\"date\">" + n.CreateDate + "</span></li>";                });                // 輸出HTML                $("#PageContain").html(html);            }        }); // Ajax_end        // 加入分頁外掛程式的綁定，第一個參數pageCount為總共多少條資料        $("#Pagination").pagination(pageCount, {            callback: pageselectCallback,            prev_text: '« 上一頁',            next_text: '下一頁 »',            items_per_page: PageSize,     // 每頁顯示條數            current_page: pageindx,  // 當前頁索引,這裡0為第一頁            num_display_entries: 6,  // 前面顯示幾個按鈕            num_edge_entries: 2  // 後面顯示幾個按鈕        });    }  // InitData_fun_end});  // ready_end

執行個體完整源碼：源碼與上面所寫稍有不同

jQueryPager(JQuery分頁外掛程式pagination實現Ajax分頁).rar

二、使用aspnetpager分頁控制項實現分頁：

控制項下載及示範地址：http://www.webdiyer.com/  

預存程序和資料訪問層所用的代碼和上面的一樣

1、添加AspNetPager控制項到Vs控制項工具箱，方便以後隨時調用（如這裡添加到“常規”一欄）

點擊“常規”→右鍵“選擇項”→“.Net Framework組件”→“瀏覽”→選擇下載檔案中的“AspNetPager.dll”

添加成功就會在常規工具箱出現“AspNetPager”控制項了

2、引用AspNetPager控制項（方法和其他一樣，拖動到指定位置即可）

講分頁控制項拖動到頁面時頭部就會自動添加

<%@ Register Assembly="AspNetPager" Namespace="Wuqi.Webdiyer" TagPrefix="webdiyer" %>

分頁地區，控制項代碼：（可在屬性欄設定相應屬性）

<webdiyer:aspnetpager CssClass="pages" CurrentPageButtonClass="cpb"   ID="anp"         runat="server"          CustomInfoHTML="當前第%CurrentPageIndex%/%PageCount%頁，每頁%PageSize%條，共%RecordCount%條"         FirstPageText="|&lt;&lt;" LastPageText="&gt;&gt;|"         PageIndexBoxType="TextBox" PageSize="20" ShowCustomInfoSection="Left"         ShowPageIndexBox="Never" NumericButtonCount="5"         LayoutType="Div" CustomInfoClass="pages_left" onpagechanged="anp_PageChanged"         CustomInfoSectionWidth="40%" UrlPaging="True"></webdiyer:aspnetpager>

3、顯示分頁資料

這裡用repeater綁定資料

<asp:Repeater ID="repList" runat="server"><ItemTemplate><li class="b"><span class="title"><a href="newscontent.aspx?id=<%#Eval("Id")%>" class="typelink"  target="_blank"><%#Eval("LongTitle")%></a></span><span class="date"><%#Eval("CreateDate")%></span></li></ItemTemplate></asp:Repeater>

後台.cs代碼

using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.UI;using System.Web.UI.WebControls;public partial class newslist : System.Web.UI.Page{    DAl.NewsDAO newsDao = new DAl.NewsDAO();    protected void Page_Load(object sender, EventArgs e)    {        if (!IsPostBack)        {            // 計算分頁總條數            anp.RecordCount = newsDao.CalcCount("");            // 繫結資料行表            repListBind();        }    }    /// <summary>繫結資料行表資料</summary>    private void repListBind()    {        // 綁定repeater        repList.DataSource = newsDao.GetList("CreateDate", "desc", anp.PageSize, anp.CurrentPageIndex, "");        repList.DataBind();    }    // 分頁事件    protected void anp_PageChanged(object sender, EventArgs e)    {        repListBind();    }}

A：分頁之前必須計算資料總條數，並賦值給AspNetPager的RecordCount屬性

B：將分頁控制項的PageSize（頁大小）屬性、CurrentPageIndex（當前頁索引）屬性，傳遞給提取分頁資料的函數

C：設定分頁控制項的 onpagechanged 事件，即當頁碼改變時，重新綁定分頁資料列表