[ASP.NET服务器控件]OranPager 1.1.1.2 - 轻量级分页控件演示&源码

http://www.cnblogs.com/iRed/archive/2009/08/28/1555728.html

下载Oran.WebControl.OranPager 1.1.1.2

下载Oran.WebControl.OranPager 1.1.1.2 演示&源码

更新日志
**********************************************
2009/9/13 Version:1.1.1.1
*1 修复当记录总数(RecordCount)为0时。依然出现[下一页]、[尾页]按钮的BUG。
*2 修改当在快捷页码跳转工具里输入的页码有误的alert提示语，增加属性 GotoAlertFormatString

2009/9/14 Version:1.1.1.2
*1 当请求的页码大于本次最大页码时，PageIndex返回最本次最大页码

0 概论
以前还不知道别人已经有分享过分页控件的时候，竹子自己写过一个简单的分页控件，起名叫 Oran.WebControl.IndexNavigator（索引导航），很简朴的一个分页控件，但功能也基本够用，后来，为了使用户体验更好，需要功能稍加丰富些的分页控件，跟着就找到了吴旗娃的aspnetpager，但在使用过程中，发现这个控件并不好用，主要问题有：

    * 生成HTML代码结构不良好，样式非常难控制
    * 自定义性不强，表示形式受限

所以就促使竹子想自己开发一个分页控件，解决以上问题。竹子刚开始还想在aspnetpager的基础上修改，因为她是开源的，但发现代码过于复杂冗长，懒得看，怕等看完理解后所耗的时间够竹子全新开发一个，所以索性根据以往项目需求和可能的需求，全新设计开发。
主角出场：Oran.WebControl.OranPager
控件名称很好理解，Oran是竹子自己起的英文名字，Pager，即分页器。

1 主要特点，优点

  1. 以URL参数机制进行分页。
  2. 生成的HTML代码结构良好，样式易控制。
  3. 任何一部分元素均可单独设置CSS样式类名，自定义性强。
  4. 支持URL重写（UrlRewrite）规则。
  5. 逻辑简单，程序效率较高。

所有部分显示出来范例如下图：
 

页码下拉列表和快速跳转工具影响整体美观，另外，一般情况也是很不必要的，所以，建议不要打开这两个部分，那么，范例效果将如下图：
 

2 分页主要部件介绍
 

    * 自定义文本（CustomizeText）
      显示自定义HTML代码，一般用途有显示记录总数，页码总数等。
    * 首页/上一页/下一页/尾页
      此4个对象可设置单独的CSS样式类名。在实际应用中，此4个对象经常是以图片的形式显示，但在IE不同版本和不同的浏览器之间，对图片和文本的位置显示不一致，可以通过样式的background-image解决。
    * 数字页码
      页码索引，可设置最多显示N个页码，如果前/后面还有页码，根据设定可显示/隐藏『更多页码索引』。
    * 页码下拉列表
      自动选中当前页码下拉列表项，当必变项时，将改变location.href属性跳转到指定页。
    * 页码快速跳转工具
      在文本框里输入数字，按回车键或单击旁边的按钮，将改变location.href属性跳转到指定页。

3 URL重写规则
启用了伪静态分页，请将 EnableUrlRewrite 设为 true，并设置URL重写规则属性UrlRewritePattern，该属性并不是设置你的URLRewrite规则，而只是一个URL格式化字符串，其中只有一个参数 {0} 表示页码参数，如 URLRewrite 规则是 ^~/demo-(\d+)\.html$，则UrlRewritePattern属性设置为 demo-{0}.html。
PS：设置了UrlRewritePattern属性并不代表就启用了伪静态分页，必须将EnableUrlRewrite设为true才启用了伪静态分页。

4 重要参数说明

    * PageUrlParameter
      页码URL参数名称，默认为 page。
    * PageSize
      页大小，即每页显示的最大记录数。程序根据PageSize计算总页数（PageCount），所有页码索引相关。必须设置。
    * RecordCount
      总记录数，现在查询的数据的总记录数。必须设置。
    * PageIndex
      当前请求页索引，即现在访问的是第几页，一般不需要设置该参数，默认从URL里解析page参数值，如果解析失败，则返回1。

要达到图片显示的效果，请参考以下样式
CSS code/*分页器*/
.pager { height:25px; line-height:25px; background:#F9F9F9; padding:0 5px; border:solid 1px #aebfcb; text-align:right;}
.pager a { border:1px solid #d4e3e9; padding:0 3px;  margin-right:5px;}
.pager .num_btns {float:right; font-family:Tahoma;}
.pager .oran_pg_cur { border:1px solid #D5D5D5;background-color:#5984ac; color:#fff;}
.pager a:hover {  border-color:#5984ac; text-decoration:none; }
.pager .cust_txt { float:left;}
.pager .oran_pg_fp { background:url(../img/first_page.gif) 4px 4px no-repeat; padding-right:9px;}
.pager .oran_pg_pp { background:url(../img/pre_page.gif) 4px 4px no-repeat; padding-right:5px;}
.pager .oran_pg_np { background:url(../img/next_page.gif) 43px 4px no-repeat; padding-right:12px;}
.pager .oran_pg_lp { background:url(../img/last_page.gif) 29px 4px no-repeat; padding-right:12px;}
.pager select { font-size:8px; margin-top:5px; }
.pager .oran_pg_txt { height:15px; border:solid 1px #d4e3e9; width:20px; margin-left:5px;}
.pager .oran_pg_btn { height:15px; border:solid 1px #d4e3e9; margin-left:5px; font-size:9px; background:#5984ac; color:#fff; }

http://www.cnblogs.com/iRed/archive/2009/08/28/1555728.html

下载Oran.WebControl.OranPager 1.1.1.2

下载Oran.WebControl.OranPager 1.1.1.2 演示&源码