【自然框架】QuickPager asp.net 分页控件的Ajax分页方式。

 

  上次比较匆忙,Ajax的分页方式仅实现了基本功能,或者说只是验证了我的想法。现在对Ajax分页有做了一些调整,现在可以正式用了。

 

  使用方法还是非常简单,可以完全按照URL分页方式来做,只需要把PagerTurnKind 属性 设置为:PagerTurnKind.AjaxForWebControl;就可以了。

 

  然后前台需要引用jquery-1.4.2.min.js和QuickPager-1.0.js。QuickPager-1.0.js是QuickPager需要用的一个js脚本,Demo里面有这个js脚本。也可以在在线演示里下载。

 

  最后把Repeater控件(其他控件也可以,比如GridView等)放在<div id="div_Grid">,必须是这个ID名,目前没有把这个名称做到分页控件的属性里面,如果你想修改的话,需要修改QuickPager-1.0.js 。不过不建议修改。

 

  适用范围:

 

  你可能会觉得这个不是正规的Ajax分页。这个是为了给那些原来使用服务器控件(GridView、Repeater等)来写程序,后来由于某种原因必须实现Ajax方式来分页,但是又不想对原来的代码做大幅度的修改的情况。

 

  这个就是为了这种情况来设计的,原理就是直接在服务器端拼接成HTML,前台用jQUery.ajax来申请这段HTML,然后直接赋给 div_Grid。也许这种方式很不正规,但是对于刚才说的那种情况来说还是很方便的。

 

  你可以按照以前的方式来设置Repeater、GridView等控件,然后按照要求设置QuickPager分页控件就可以了。很简单。

 

  下载:http://www.naturefw.com/down/List1.aspx

 

  在线演示:http://demo.naturefw.com/Nonline/QuickPager/default.aspx

 

  直通车:http://demo.naturefw.com/Nonline/QuickPager/ajax/RepeaterAjax.aspx

 

 

  另外,我顺便做了一个伪URL,这个是为了照顾搜索引擎的。搜索引擎可以按照URL来访问页面。而用户是通过Ajax来访问页面的。这样两全其美,各取所需。当然直接访问/RepeaterAjax.aspx?page=4 是可以直接看到第四页的数据的,否则也无法“欺骗”搜索引擎了。进入后还是Ajax的分页。

 

  后台代码:

 

 

代码
///   <summary>
    
///  Ajax的分页,Repeater控件的演示。
    
///   </summary>
     public   partial   class  RepeaterAjax : BaseWebPage
    {
        
#region  初始化
        
protected   override   void  OnInit(EventArgs e)
        {
            
base .OnInit(e);

            
// 数据访问函数库的实例,使用基类里定义的。
            Pager1.DAL  =   base .Dal;

            
// 设置显示数据的控件
            Pager1.ShowDataControl  =   this .Rpt;

           
// 默认是PostBack的分页方式,这里要修改成 AjaxForWebControl的形式。以后还会出AjaxForJson的。
            Pager1.PagerTurnKind  =  PagerTurnKind.AjaxForWebControl;

        }
        
#endregion


        
protected   void  Page_Load( object  sender, EventArgs e)
        {

            
if  ( ! Page.IsPostBack)
            {
                SetPagerInfo();         
// 设置表名、字段名等

             }
        }

        
#region  给QuickPager_SQL 设置属性,以便拼接SQL
        
private   void  SetPagerInfo()
        {
            Pager1.PagerSQL.TableName 
=   " Person_User_ViewLog " ;               // 表名或者视图名称
            Pager1.PagerSQL.TableShowColumns  =   " * " ;     // 需要显示的字段
            Pager1.PagerSQL.TablePKColumn  =   " LogID " ;              // 主键名称,不支持复合主键
            Pager1.PagerSQL.TableOrderByColumns  =   " LogID desc  " // 排序字段,根据分页算法而定,可以支持多个排序字段
            Pager1.PagerSQL.TableQuery  =    "" ;   // 查询条件

            Pager1.PageSize 
=   5 ;                                   // 一页显示的记录数
            Pager1.NaviCount  =   4 ;

            
// 设置分页算法
            Pager1.PagerSQL.SetPagerSQLKind  =  PagerSQLKind.Max_TopTop;

        }
        
#endregion


       
    }

 

 

  前台设置:

 

代码
< script  language ="javascript"  type ="text/javascript"  src ="/aspnet_client/jquery/jquery-1.4.2.min.js" ></ script >
< script  language ="javascript"  type ="text/javascript"  src ="/aspnet_client/nature/QuickPager-1.0.js" ></ script >
    
div的ID必须是div_Grid

< div  id ="div_Grid"  style ="text-align:left;padding:10px;" >
        
< asp:Repeater  ID ="Rpt"  runat ="server"  EnableViewState ="false" >
            
< ItemTemplate >
                     
<% # (Container.DataItem  as  DataRowView)[ " 用户 " ] %>  在 [ <% # (Container.DataItem  as  DataRowView)[ " 访问时间 " ] %> ] 访问了网页: < br  />
                     
<% # (Container.DataItem  as  DataRowView)[ " 访问页面 " ] %> < br  />
                     浏览器信息是:
<% # (Container.DataItem  as  DataRowView)[ " UserAgent " ] %> < br  />
                     
< hr  />
            
</ ItemTemplate >
        
</ asp:Repeater >
    
</ div >
    
< Nature:QuickPager  ID ="Pager1"  runat ="server"     />

 

 

 

你可能感兴趣的:(asp.net)