Asp.Net分页方法：JQuery插件实现Ajax无刷新分页、AspNetPager分页控件实现分页

一、使用JQuery插件pagination实现AJax无刷新分页：

以下只列出主要代码及注释，详细请参考最后源码：

我们需要用到的文件有：jquery.js，jquery.pagination.js，pagination.css

以及用于将DataTable转换为Json的插件Newtonsoft.Json.Net20.dll，文件在包含在最下面的源文件中

分页存储过程：

SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
-- =============================================
-- 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)
AS

declare @strSQL   varchar(5000)

if @strWhere !=''
set @strWhere=' where '+@strWhere

set @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 事件，即当页码改变时，重新绑定分页数据列表