ASP.NET-AspNetPager分页控件完整使用方法

     牛腩新闻发布系统不知不觉就看完了，第一次接触网页制作，感觉很多知识点都是新的，虽然新，但是有种似曾相识的感觉，利用米老师的织网学习法，很快便消化了！由于学到的东西太多太多，而且很杂，就没有发到博客上来。看到最后，牛腩大哥没有做分页，但是我感觉这是一个相当重要的功能，几乎是网页必备。作为一个锻炼的机会，自己实现了一下分页功能。第一次做，显得很生疏，为了方便以后参考和方便更多人学习，特总结成一篇文章。本文使用的分页控件为AspNetPager。

 

     注意这篇文章不适合没有任何网页编程经验的人看，我写的只是关键步骤，宏观模块，并没有细节实现，但是我可以保证补全代码之后绝对可以实现。看懂这个必须是你亲自用ASP.NET编写过网页程序。

 

     还是那句话，我的方法肯定不是最好的，如果您有好的建议欢迎与我交流！！

 

效果图：

分页控件样式设置：

/*拍拍网风格*/
.paginator { font: 11px Arial, Helvetica, sans-serif;padding:10px 20px 10px 0; margin: 0px;}
.paginator a {padding: 1px 6px; border: solid 1px #ddd; background: #fff; text-decoration: none;margin-right:2px}
.paginator a:visited {padding: 1px 6px; border: solid 1px #ddd; background: #fff; text-decoration: none;}
.paginator .cpb {padding: 1px 6px;font-weight: bold; font-size: 13px;border:none}
.paginator a:hover {color: #fff; background: #ffa501;border-color:#ffa501;text-decoration: none;}

/*淘宝风格*/
.paginator { font: 12px Arial, Helvetica, sans-serif;padding:10px 20px 10px 0; margin: 0px;}
.paginator a {border:solid 1px #ccc;color:#0063dc;cursor:pointer;text-decoration:none;}
.paginator a:visited {padding: 1px 6px; border: solid 1px #ddd; background: #fff; text-decoration: none;}
.paginator .cpb {border:1px solid #F50;font-weight:700;color:#F50;background-color:#ffeee5;}
.paginator a:hover {border:solid 1px #F50;color:#f60;text-decoration:none;}
.paginator a,.paginator a:visited,.paginator .cpb,.paginator a:hover  
{float:left;height:16px;line-height:16px;min-width:10px;_width:10px;margin-right:5px;text-align:center;
 white-space:nowrap;font-size:12px;font-family:Arial,SimSun;padding:0 3px;}

 

说明：保存到css文件中，引用即可。这两个样式任选一个。。。。不要都粘贴进去

web页面分页控件引用设置：

<table cellpadding="0" cellspacing="0" align="center" width="99%" class="border">
    <tr>
        <td align="left" colspan="2">
            <webdiyer:AspNetPager ID="anpNewsPage" CssClass="paginator"   CurrentPageButtonClass="cpb" runat="server" AlwaysShow="True" 
            FirstPageText="首页"  LastPageText="尾页" NextPageText="下一页"  PageSize="10" PrevPageText="上一页"  ShowCustomInfoSection="Left" 
            ShowInputBox="Never" onpagechanged="anpNewsPage_PageChanged"  CustomInfoTextAlign="Left" LayoutType="Table"  >
            </webdiyer:AspNetPager>
        </td>
    </tr>
</table>

说明：分页控件AspNetPager下载地址：http://www.webdiyer.com/Controls/AspNetPager/Downloads。先引用AspNetPager.dll，然后添加到工具箱中即可。

后台响应代码：

/// <summary>
/// 分页选择新闻
/// </summary>
/// <param name="sender">系统内置</param>
/// <param name="e">系统内置</param>
protected void anpNewsPage_PageChanged(object sender, EventArgs e) 
{
    repNews.DataSource = new BLL_News().selectPage(anpNewsPage.CurrentPageIndex); 
    repNews.DataBind();
}

说明：由于这是从我的工程中抽出来的代码，所以看起来可能比较困难。这个方法是来自于AspNetPager控件的onpagechanged="anpNewsPage_PageChanged"事件，所以名字当然要一样了，在AspNetPager控件中找到onpagechanged事件双击即可，但是我没找到，我是手写的。new BLL_News().selectPage()这个方法就是调用的数据库中的proSelectPage存储过程（见下边的“数据库存储过程”），anpNewsPage.CurrentPageIndex当然就是获取当前是第几页，然后传入存储过程，选出该页的数据。利用proSelectPage存储过程选出当前页的数据后，设置为repNews对象的数据源。repNews是什么呢？它是一个Repeater控件（把数据绑定到repNews对象后，利用一个ItemTemplate模版就可以轻松显示该页的数据了，至于具体如何读数据，不是本文的讨论范围。。百度一下就有了）。需要注意的是：在页面加载的时候，要设置分页控件的总记录数，可以用如下SQL语句获得：select count(*) as allCount from News 。


数据库存储过程：

 

SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
-- =============================================
-- Author:		yy
-- Create date: 2011-12-28
-- Description:	分页读取数据
-- =============================================
CREATE PROCEDURE proSelectPage
	@pageNow int  -- 当前页数
AS
BEGIN
	SELECT TOP 10 * FROM News  -- 每页显示多少条数据在这设置（语句中的10）
	WHERE id NOT IN
	(SELECT TOP (10*(@pageNow-1)) id FROM News ORDER BY id)  -- 设置显示多少条数据这里的10也要改 
	ORDER BY id
END
GO

说明：存储过程中的id是表的主键，设置为自增长即可。News是指要读取的表