zoukankan      html  css  js  c++  java
  • 【自然框架】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"   />
  • 相关阅读:
    hdu 3342 Legal or Not 拓排序
    hdu 1596 find the safest road Dijkstra
    hdu 1874 畅通工程续 Dijkstra
    poj 2676 sudoku dfs
    poj 2251 BFS
    poj Prime Path BFS
    poj 3278 BFS
    poj 2387 Dijkstra 模板
    poj 3083 DFS 和BFS
    poj 1062 昂贵的聘礼 dijkstra
  • 原文地址:https://www.cnblogs.com/jyk/p/1942434.html
Copyright © 2011-2022 走看看