分页控件 实战 Post篇

简介:

前言:

分页,大伙并不陌生
也许你正用着:DataGrid/GridView自带的分页
也许你正用着:网上流传较广的AspnetPager分页控件
也许你正用着:其它同事写的分页控件
又也许:你正是那个写分页控件的人,如果是,现在的你是否回头看过自己当初的源码?感觉?

 

附言:

昨夜,花了两个小时左右,把一个2007年那会写的分页控件,重新优化改造了一下:
cs代码大小从原来的14K,缩减到4K。
原来的分页控件源码:点击下载
 
在看以下正文之前,还是希望能看一下原来的分页控件的源码,这样才能感叹下改造前后的巨大落差。

 

正文:

一:概述

目前分页控件,据个人所知的,有几下几种实现情况:

1:Post篇 [生成N个按钮,每个按钮点击时产生一个Post事件引发分页]

常见方式:控件实现复杂,内渗杂sql语句。
本文方式:反射机制,与sql无关。
遥想当年是配合了atlas的updatepanel实现的无刷新

 

 

2:Get篇 [生成N个链接,每个链接点击时产生一个Get事件引发分页]

方式一:链接分页,常见于参数后面的page=N
方式二:链接分页,Url重写,常见于url参数为 /page/N
方式三:脚本分页,无刷新,链接都采用onclick="js函数"引发ajax回调异步分页。

 

 

二:实现

在具体写实现代码之前,我们上几张图片看一下效果:

 

 

 

 

 

说明:

昨夜把代码上传到网络空间时,忘了把样式也传上去,早上下载后发现没样式。

所以样式是自己临时加上去的,大伙自己感知一下效果了就可以了。

 

 

 

下面开始分页控件实现具体步骤:

1:新建一个用户控件:Pager

2:控件前台html

复制代码
< table  id ="pager"  border ="0"  cellpadding ="0"  cellspacing ="0"  width ="100%" >
    
< tr >
        
< td >
            
< asp:LinkButton  ID ="lbtnFirstLink"  runat ="server"  CausesValidation ="false"  OnClick ="ClickEvent" > 首页 </ asp:LinkButton >
            
< asp:LinkButton  ID ="lbtnPrevPage"  runat ="server"  CausesValidation ="false"   OnClick ="ClickEvent" > 上一页 </ asp:LinkButton >
    
            
< asp:Repeater  ID ="rptNum"  runat ="server"  OnItemCommand ="rptNum_ItemCommand" >
                
< ItemTemplate >
    
< asp:LinkButton  ID ="lbtnNum"  runat ="server"  CausesValidation ="false"  CommandArgument ='<%#  Container.DataItem % > '
    CssClass='
<% # Convert.ToInt32(Container.DataItem) == PageIndex? " num_yellow " : " num_blue " %> ' Width="15"> <% # Container.DataItem  %>
</ asp:LinkButton >
                
</ ItemTemplate >
            
</ asp:Repeater >
      
            
< asp:LinkButton  ID ="lbtnNextPage"  runat ="server"  CausesValidation ="false"   OnClick ="ClickEvent" > 下一页 </ asp:LinkButton >
            
< asp:LinkButton  ID ="lbtnLastPage"  runat ="server"  CausesValidation ="false"   OnClick ="ClickEvent" > 尾页 </ asp:LinkButton >
            
< asp:HiddenField  ID ="hfBindName"  runat ="server"   />
        
</ td >
    
</ tr >
</ table >
复制代码

 

说明:

复制代码
A:用了表格布局,简单,想换div的自己改了。
B:用了五个LinkButton,其中数字的一个用Repeater循环N个数字出来
C:最后加了一个隐藏域,用于保存绑定的方法名称。
D:数字里有两个样式用于为数字赋样式,样式到示例时再写出来吧
E:首页/上一页/下一页/尾页,用的点击事件都是同一个函数。
F:Repeater有个OnItemCommand事件,点击数字要重新绑定的。
复制代码

 

3:后台cs代码

A:几个属性

复制代码
     private   int  _PageIndex;
    
public   int  PageIndex
    {
        
get { if  (_PageIndex  ==   0 ){ _PageIndex  =   1 ;} return  _PageIndex;}
        
set { _PageIndex  =  value;}
    }    
    
private   int  _PageSize;
    
public   int  PageSize
    {
        
get { if  (_PageSize  ==   0 ){_PageSize  =   1 ;} return  _PageSize;}
        
set { _PageSize  =  value;}
    }
    
private   int  _Count;
    
public   int  Count
    {
        
get { return  _Count; }
        
set  { _Count  =  value; }
    }
    
///   <summary>
    
///  该方法名称修饰符为需为public
    
///   </summary>
     public   string  BindName
    {
        
get { return  hfBindName.Value;}
        
set {hfBindName.Value  =  value; }
    }
复制代码

说明:

PageIndex:第几页
PageSize:每页多少条
Count:记录总数
BindName:绑定的方法名称,用于反射绑定数据

 

B:Page_Load做点什么

复制代码
private   void  Page_Load( object  sender, System.EventArgs e)
{
        
if  ( ! Page.IsPostBack)
        {
            BindPager();
// 绑定分页数字
        }
}
复制代码

说明:

第一次绑定时,界面已实现绑定数据,所以只需要绑定分页的数字就行了

 

C:绑定分页数字

复制代码
public   void  BindPager()
{
        
int  pageCount  =  (Count  %  PageSize)  ==   0   ?  Count  /  PageSize : Count  /  PageSize  +   1 ; // 页数
        SetButtonEnable(pageCount); // 下面四个按钮可用状态设置
        BindPageNum(pageCount); // 绑定循环数字
}
复制代码

说明:

1:从记录总数和页面大小计算出有多少页,这个少不的。
2:根据当页的页数和当前页面索引,设置下“首页/下一页/上一页/尾页”的可用状态
3:根据当前的页数绑定一下循环的数字。

 

函数分解:SetButtonEnable [设置按钮可用状态及参数赋值]

复制代码
private   void  SetButtonEnable( int  pageCount)
{
        lbtnFirstLink.Enabled 
=  PageIndex  !=   1 ;
        lbtnPrevPage.Enabled 
=  PageIndex  !=   1 ;
        lbtnNextPage.Enabled 
=  PageIndex  !=  pageCount;
        lbtnLastPage.Enabled 
=  PageIndex  !=  pageCount;
        lbtnFirstLink.CommandArgument 
=   " 1 " ;
        lbtnPrevPage.CommandArgument 
=  (PageIndex  -   1 ).ToString();
        lbtnNextPage.CommandArgument 
=  (PageIndex  +   1 ).ToString();
        lbtnLastPage.CommandArgument 
=  pageCount.ToString();
}
复制代码

 

说明:

1:如果当前页为第1页:首页/上一页状态不可用
2:如果当前页为最后1页:下一页/尾页状态不可用
3:顺路把几个页索引值赋给CommandArgument

 

函数分解:BindPageNum [绑定分页数字]

复制代码
protected   void  BindPageNum( int  pageCount)
{
        
int  start  =   1 , end  =   10 ;
        
if  (pageCount  <  end) // 页数小于10
        {
            end 
=  pageCount;
        }
        
else
        {
            start 
=  (PageIndex  >   5 ?  PageIndex  -   5  : start;
            
int  result  =  (start  +   9 -  pageCount; // 是否超过最后面的页数
             if  (result  >   0 )
            {
                end 
=  pageCount;
                start 
-=  result; // 超过后,补差
            }
            
else
            {
                end 
=  start  +   9 ;
            }
        }
        ReBindNum(start, end);
}
复制代码

说明:

1:由于绑定的数字,在往后页数点击时,页数数字需要进行变化,所以需计算好开始数字和结束数字
2:根据开始数字和结束数字进行绑定

 

函数分解:ReBindNum [循环绑定数字]

复制代码
private   void  ReBindNum( int  start,  int  end)
{
        
int [] rows  =   new   int [end-start+1 ];//这里之前写10,修正为end-start+1。
        
int  index  =   0 ;
        
for  ( int  i  =  start; i  <=  end; i ++ )
        {
            rows[index] 
=  i;
            index
++ ;
        }
        rptNum.DataSource 
=  rows;
        rptNum.DataBind();
 }
复制代码

说明:

1:这里用int[]数组循环数字来绑定到Repeater
2:界面绑定用
< %# Container.DataItem  % > 方式进行对应

 

D:反射绑定[简洁重点函数]

复制代码
private void ReBindData(string pageIndex)
{
        PageIndex = int.Parse(pageIndex);
        object obj = base.Parent is HtmlForm ? this.Page : base.Parent;
        MethodInfo mi = obj.GetType().GetMethod(BindName);
        mi.Invoke(obj,null);
        BindPager();
}
复制代码

说明:

1:重点在于区分,分页控件是直接在页面中使用,还是在控件套分页控件的方式使用
2:获取绑定数据的方法,重新调用一下
3:重新绑定分布数字

 

F:首页/上一页/下一页/尾页,按钮事件

protected void ClickEvent(object sender, EventArgs e)
{
        ReBindData(((LinkButton)sender).CommandArgument.ToString());
}

 

G:分页数字,按钮事件

protected void rptNum_ItemCommand(object source, RepeaterCommandEventArgs e)
{
   ReBindData(e.CommandArgument.ToString());
}

 

 

三:示例代码,和 CYQ.Data轻量数据层框架 配合使用

1:html代码

复制代码
<% @ Page Language = " C# "  AutoEventWireup = " true "  CodeFile = " PagerDemo.aspx.cs "  Inherits = " PagerDemo "  EnableTheming = " false "   %>
<% @ Register Src = " UserControls/Pager.ascx "  TagName = " Pager "  TagPrefix = " uc1 "   %>
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml"   >
< head  runat ="server" >
    
< title > 路过秋天 分页控件演示 </ title >
    
< style  type ="text/css" >
    #pager 
{ color : White ; }
    #pager a
{ color : White ; text-decoration : none ;   }
    .num_blue
{ color : White ; border : solid 1px Blue ; text-align : center ; }
    .num_yellow
{ color : while ; border : solid 1px Yellow ;  text-align : center ; }
    
</ style >
</ head >
< body  style ="background-color:Black;color:White;" >
    
< form  id ="form1"  runat ="server" >
    
< div >< asp:GridView  ID ="gvUsers"  runat ="server" ></ asp:GridView >< br  />
        
< uc1:Pager  ID ="Pager1"  runat ="server"   />
    
</ div >
    
</ form >
</ body >
</ html >
复制代码

 

2:后台代码

复制代码
protected   void  Page_Load( object  sender, EventArgs e)
{
        
if  ( ! IsPostBack)
        {
            LoadData();
        }
}
public   void  LoadData()
{
        
int  count;
        MAction action 
=   new  MAction(TableNames.Users);
        MDataTable mTable 
=  action.Select(Pager1.PageIndex, Pager1.PageSize,  "" out  count);
        action.Close();
        gvUsers.DataSource 
=  mTable;
        gvUsers.DataBind();
        Pager1.BindName 
=   " LoadData " ;
        Pager1.Count 
=  count;
}
复制代码

 

说明:

1:BindName为绑定数据的方法名称,该方法名称的修饰符号需为public
2: 默认的分页PageSize可自行修改默认值
3: 前面html也可设置为:
< uc1:Pager  ID ="Pager1"  runat ="server"  PageSize ="20"   />

 

3:最终效果

 

如正文一开始发的五张图片一致

 

 

结言:

以上教程中,以包含所有代码,包括前后台,所以不另提供打包下载。
有兴趣的来客欢迎讨论留言。

 

源码下载地址:http://www.cyqdata.com/download/article-detail-28683

版权声明:本文原创发表于博客园,作者为路过秋天,原文链接:

http://www.cnblogs.com/cyq1162/archive/2010/08/30/1812361.html

相关文章
|
7月前
|
前端开发
【(不用Ajax)解决 Layui 插件分页点下一页后又自动跳回前一页的问题】
【(不用Ajax)解决 Layui 插件分页点下一页后又自动跳回前一页的问题】
56 0
|
JavaScript 测试技术
Easyui datagrid 修改分页组件的分页提示信息为中文
Easyui datagrid 修改分页组件的分页提示信息为中文
63 0
|
前端开发 JavaScript
【layui】不使用ajax来做分页,根据地址分页
【layui】不使用ajax来做分页,根据地址分页
129 0
【layui】不使用ajax来做分页,根据地址分页
【Layui】对于post请求方式的分页引发的刷新父级页面问题
【Layui】对于post请求方式的分页引发的刷新父级页面问题
355 0
【Layui】对于post请求方式的分页引发的刷新父级页面问题
|
JavaScript 搜索推荐 前端开发
【自然框架】QuickPager分页控件,新增一种分页方式——伪URL分页(Postback版)
适用场景   先说一下伪URL分页的适用场景。在网站的网页里实现查询功能,如果查询条件比较少的话,还比较好办,把查询条件放到URL里面传递即可。但是如果查询条件过多,就会照成URL的长度过长。既不好看,编写起来也很麻烦。
1130 0
|
SQL
分页解决方案 之 QuickPager的使用方法(PostBack分页、自定义获取数据)
        适用范围:网站后台管理、OA、CRM、CMS等,从关系型数据库里提取数据,或者XML等获取数据,不愿意使用Pager_SQL、DataAccessLibrary的情况。       优点:可以使用自己喜欢的方式获取数据,不仅仅限于关系型数据库,其他的也都可以。
830 0
|
SQL 数据库
分页解决方案 之 QuickPager的使用方法(PostBack分页、自动获取数据)
      适用范围:网站后台管理、OA、CRM、CMS等,从关系型数据库里提取数据,愿意使用Pager_SQL、DataAccessLibrary的情况。       最佳数据库:MS SQL。
789 0
|
JavaScript 算法 搜索推荐
【自然框架】QuickPager asp.net 分页控件的Ajax分页方式。
  上次比较匆忙,Ajax的分页方式仅实现了基本功能,或者说只是验证了我的想法。现在对Ajax分页有做了一些调整,现在可以正式用了。     使用方法还是非常简单,可以完全按照URL分页方式来做,只需要把PagerTurnKind 属性 设置为:PagerTurnKind.AjaxForWebControl;就可以了。
1139 0
|
算法 数据库 内存技术
【视频】自然框架之分页控件的使用方法(一) PostBack方式的一般分页方式
前言:分页控件的优点   1、 按需所取 —— 需要几条记录就从数据库里提取几条记录,不会多取。 2、 使用简单 —— 设置几个属性就可以实现分页的功能。 3、 多种分页算法 —— (即分页用的SQL语句)可以根据不同的需求灵活选择 4、 支持多种数据库 —— 用不同的分页算法对应不同的数据库。
1088 0
|
SQL 算法
分页解决方案 之 QuickPager的使用方法(URL分页、自动获取数据)
      适用范围:网站前台页面 等,从关系型数据库里提取数据,愿意使用Pager_SQL、DataAccessLibrary的情况。       优点:使用URL的方式,对于SEO比较友好。
934 0

热门文章

最新文章