AspNetPager实现真分页+多种样式

真假分页

分页是Web应用程序中最常用到的功能之一。当从数据库中获取的记录远远超过界面承载能力的时候，使用分页可以使我们的界面更加美观，更加的用户友好。分页包括两种类型：真分页和假分页。 其中假分页就是从数据库中获取全部的想要检索的记录数，然后再显示给用户；而真分页则是根据页面的情况，检索特定页面要求内的记录。当然如果数据库中记录较少的话，真假分页的效果是不明显的；但是当数据库中记录远远超过我们所能理解的范围后，用假分页进行显示数据，则会造成时间和空间上的问题，系统的可访问性大打折扣；相对而言，使用真分页，检索特定页面要求的记录数目，则大大提高了系统的效率和可访问性；

AspNetPager控件

牛腩老师给我们提供了一种实现记录真分页的思路，在视频中并没有具体的代码实现。而我现在就和大家来共同学习一下牛腩老师的真分页功能；首先：下载AspNetPager控件（点击下载），下载好之后至于具体的如何引用DLL控件，如何添加控件到工具箱，这里就不赘述了，以前的VB学习已经涉及到过，实在不知道的可以百度哈~~~该控件几个重要的属性：

alwaysshow：总是显示分页控件；

PageSize：指定每页显示的记录数；

custominfosectionwidth：用户自定义信息区的宽度；

custominfotextalign：用户自定义信息区的对齐方式；

firstpagetext：第一页按钮上显示的文本；

horizontalalign：内容水平对齐方式；

lastpagetext：最后页按钮上显示的文本；

navigationbuttontype：第一页、下一页、最后一页按钮的类型；

nextpagetext：下一页按钮上显示的文本；

pageindexboxtype：指示页索引框的显示类型：有TextBOX和dropdownlist两种；

pagingbuttonspacing：导航页按钮的间距；

prevpagetext：上一页按钮的显示的文本；

showcustominfosection：显示当前页和总页信息，默认为不显示，值为LEFT时将显示在页索引前，为right时显示在页索引后；

showpageindexbox：指定页索引文本框或下拉框的显示方式；

textafterpageindexbox：指定页索引文本框或下拉框后的文本；

UrlPaging：是够使用URL传递分页的方式来分页；

textbeforepageindexbox：指定页索引文本框或下拉框前面显示的文本；

width：该控件的宽度；

CustomInfoHTML:指定要显示在用户自定义信息区的用户自定义HTML信息文本

当我们添加引用完毕，并添加控件到工具箱后，在界面拖入AspNetPager控件，然后看代码实现：

代码实现：

ＳＱＬ存储过程：

 

USE [newssystem]
GO
/****** Object:  StoredProcedure [dbo].[SelectPage]    Script Date: 08/24/2013 12:31:03 ******/
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
   CREATE PROCEDURE [dbo].[SelectPage]

   @startIndex integer,
   @endIndex integer
AS
BEGIN
   SET NOCOUNT ON;
      with temptbl as (  SELECT ROW_NUMBER() OVER (ORDER BY id desc)AS 行号, *from news )
      SELECT * FROM temptbl where 行号 between @startIndex and @endIndex
END
GO

Ｄ层执行存储过程：

 

#region  新闻分页	        /// <summary>
	        /// 根据页数来实现新闻分页
	        /// </summary>
	        /// <param name="startIndex">开始值</param>
	        /// <param name="endIndex">结束值</param>
	        /// <returns>datatable</returns>
	        public DataTable SelectPage(int startIndex, int endIndex)
	        {
	            DataTable dt = new DataTable();
	            string cmdText = "SelectPage";
	
	            SqlParameter[] paras = new SqlParameter[] { 
	                new SqlParameter("@startIndex", startIndex ),
	                new SqlParameter("@endIndex", endIndex)
	            };
	
	            dt = sqlhelper.ExecuteQuery(cmdText, paras, CommandType.StoredProcedure);
	            return dt;
	        }
 #endregion

Ｂ层分页逻辑：

 

	       #region  新闻分页
	        /// <summary>
	        /// 新闻分页
	        /// </summary>
	        /// <param name="startIndex">记录开始值</param>
	        /// <param name="endIndex">记录结束值</param>
	        /// <returns></returns>
	        public DataTable  SelectPage(int startIndex, int endIndex)
	        {
	            return ndao.SelectPage(startIndex, endIndex);
	        }
	        #endregion 

Web层实现：

要使AspNetPager正常运行，只需要设置它的RecordCount属性的值，根据需要编写PageChanged事件处理程序

 

		
		        protected void Page_Load(object sender, EventArgs e)
		        {
		            AspNetPager1.RecordCount = new NewsManager().SelectAll().Rows.Count;
	                    int startIndex = AspNetPager1.StartRecordIndex;
	                    int endIndex = AspNetPager1.EndRecordIndex;
	                    repNews.DataSource = new NewsManager().SelectPage(startIndex, endIndex);
	                    repNews.DataBind();
		        }
		
		        protected void AspNetPager1_PageChanged(object sender, EventArgs e)
		        {
		            int startIndex = AspNetPager1.StartRecordIndex;
		            int endIndex = AspNetPager1.EndRecordIndex;
		            repNews.DataSource = new NewsManager().SelectPage(startIndex, endIndex);
		            repNews.DataBind();
		        } 

这样就实现简单的分页了；但是运行之后，效果感觉和次，因为那个控件的样式太让人作呕了，看下图：

个性化样式：

的确，样式有点寒碜～～～不过问题总比困难多，现在给提供几个美观大方的控件样式：

拍拍网分页控件样式（CSS样式表）：

 

.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;}

迅雷分页控件样式（CSS样式表）：

 

.pages { color: #999; }
.pages a, .pages .cpb { text-decoration:none;float: left; padding: 0 5px; border: 1px solid #ddd;background: #ffff;margin:0 2px; font-size:11px; color:#000;}
.pages a:hover { background-color: #E61636; color:#fff;border:1px solid #E61636; text-decoration:none;}
.pages .cpb { font-weight: bold; color: #fff; background: #E61636; border:1px solid #E61636;}

aspx页面代码 ：

 

<webdiyer:AspNetPager ID="AspNetPager1" runat="server" CssClass="paginator" AlwaysShow="True" AlwaysShowFirstLastPageNumber="True"  ClientIDMode="Static" FirstPageText="首页" LastPageText="最后" NextPageText="后页" PageIndexBoxType="DropDownList" PageSize="5" PrevPageText="前页" Width="240px" HorizontalAlign="Justify" OnPageChanged="AspNetPager1_PageChanged">  </webdiyer:AspNetPager>

运行效果：

 

感触：

当然，样式不止这两个（更多样式），想起上次师哥批评的时候说我的话：给你个工具你不好好用~~~为此，当牛腩老师讲了那个AspNetPager网址的时候，好奇的点了点其他的页面，发现了这些相对来说更加美观的CSS样式，特此分享一下，顺便说一下：谢谢顺便学习法！