asp.net 2.0中实现自定义分页(首页,上一页,10页缩略,下一页,末页,前10页,后10页)

大家先看这篇文章

asp.net 2.0中实现自定义分页

我就是参考这篇文章写出来的，或者应该说是改出来的.

效果图:



这段代码确实很实用，基本上可以实现任意的分页样式了．

下面是主要代码:

Default.aspx

<% @ Page Language = " C# "  AutoEventWireup = " true "   CodeFile = " Default.aspx.cs "  Inherits = " _Default "   %>

<! 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 " >
   body ... {
     font:12px tahoma; 
     background:#E4E8F3;
   }
   table ... {
        border-collapse:collapse;
   }
   th ... {
        background:#B8C0D3;
   }
   th,td ... {
        border:1px solid #8594B1;
   }
   td ... {
        height:25px;
        padding:5px;
        background:#EFF1F5;
   }
    a
    ... {
        color:#240589;
        text-decoration: none;
   }
    /**/ /* Pager Style Start */
.number span a
... {
    font-size:12px;
      padding-top:4px;
      padding-bottom:4px;
      padding-left:6px;
      padding-right:6px;
}
.number span a:hover
... {
    font-size: 12px;
    padding-top:4px;
      padding-bottom:4px;
      padding-left:6px;
      padding-right:6px;
    background-color: #3366cc;
    color:#FFFFFF;
}
.number 
... {
    margin-bottom:5px;
    margin-top:5px;
    font-size: 14px;
    font-weight: bold;
    color: #ff00ff;
}
.number span
... {
    border:solid 1px #cccccc;
    background-color:#FFFFFF;
    color:#666666;
    font-size:12px;
    font-family:Verdana;
    line-height:20px;
    display:inline-block;
    margin-left:4px;
    margin-right:4px;
}
    </ style >
</ head >


< body >
     < form id = " form1 "  runat = " server " >
     < script src = " pager.js "  type = " text/javascript " ></ script >
     < div >
         < asp:Repeater ID = " myRepeater "  runat = " server "  OnItemCommand = " Repeater1_ItemCommand " >
         < HeaderTemplate >
         < table >
         < tr >
         < th > 行政区划 </ td >
         < th > 法人号 </ td >
         < th > 事业单位 </ td >
         < th > 法人代表 </ td >
         < th > 住所 </ th >
         </ tr >
         </ HeaderTemplate >
         < ItemTemplate >
         < tr >
         < td >< asp:Label runat = " server "  Text = ' <%#Eval("xingzheng","{0}") %> '   /></ td >
         < td >< asp:Label runat = " server "  Text = ' <%#Eval("faren","{0}") %> '   /></ td >
         < td >< asp:Label runat = " server "  Text = ' <%#Eval("shiye","{0}") %> '   /></ td >
         < td >< asp:Label runat = " server "  Text = ' <%#Eval("fading","{0}") %> '   /></ td >
         < td >< asp:Label runat = " server "  Text = ' <%#Eval("zhusuo","{0}") %> '   /></ td >
         </ tr >
         </ ItemTemplate >
         < FooterTemplate >      
         </ table >
         </ FooterTemplate >
         </ asp:Repeater >  
     </ div >
     < br  />
     < script language = " javascript "  type = " text/javascript " >
    var pg  =   new  showPages( ' pg ' );
    pg.pageCount  =   <%= PageCount  %> ;
    pg.printHtml();
     </ script >
     </ form >
</ body >
</ html >

 

 Default.aspx.cs
pager.js

//  JScript 文件

function showPages(name)  ... { //初始化属性
    this.name = name;      //对象名称
    this.page = 1;         //当前页数
    this.pageCount = 1;    //总页数
    this.argName = 'page'; //参数名
    this.showTimes = 1;    //打印次数
}

showPages.prototype.getPage  =  function() ... { //丛url获得当前页数,如果变量重复只获取最后一个
    var args = location.search;
    var reg = new RegExp('[?&]?' + this.argName + '=([^&]*)[&$]?', 'gi');
    var chk = args.match(reg);
    this.page = RegExp.$1;
}
showPages.prototype.checkPages  =  function() ... { //进行当前页数和总页数的验证
    if (isNaN(parseInt(this.page))) this.page = 1;
    if (isNaN(parseInt(this.pageCount))) this.pageCount = 1;
    if (this.page < 1) this.page = 1;
    if (this.pageCount < 1) this.pageCount = 1;
    if (this.page > this.pageCount) this.page = this.pageCount;
    this.page = parseInt(this.page);
    this.pageCount = parseInt(this.pageCount);
}
showPages.prototype.createHtml  =  function() ... { //生成html代码
    var strHtml = '', prevPage = this.page - 1, nextPage = this.page + 1;
            strHtml += '<span class="count">Pages: ' + this.page + ' / ' + this.pageCount + '</span>';
            strHtml += '<span class="number">';
            if (prevPage < 1) ...{
                strHtml += '<span title="首页">&#171;</span>';
                strHtml += '<span title="前一页">&#139;</span>';
            } else ...{
                strHtml += '<span title="首页"><a href="javascript:' + this.name + '.toPage(1);">&#171;</a></span>';
                strHtml += '<span title="前一页"><a href="javascript:' + this.name + '.toPage(' + prevPage + ');">&#139;</a></span>';
            }
            if (this.page % 10 ==0) ...{
                var startPage = this.page - 9;
            } else ...{
                var startPage = this.page - this.page % 10 + 1;
            }
            if (startPage > 10) strHtml += '<span title="前十页"><a href="javascript:' + this.name + '.toPage(' + (startPage - 1) + ');">...</a></span>';
            for (var i = startPage; i < startPage + 10; i++) ...{
                if (i > this.pageCount) break;
                if (i == this.page) ...{
                    strHtml += '<span title="第' + i + '页">' + i + '</span>';
                } else ...{
                    strHtml += '<span title="第' + i + '页"><a href="javascript:' + this.name + '.toPage(' + i + ');">' + i + '</a></span>';
                }
            }
            if (this.pageCount >= startPage + 10) strHtml += '<span title="后10页"><a href="javascript:' + this.name + '.toPage(' + (startPage + 10) + ');">...</a></span>';
            if (nextPage > this.pageCount) ...{
                strHtml += '<span title="下一页">&#155;</span>';
                strHtml += '<span title="上一页">&#187;</span>';
            } else ...{
                strHtml += '<span title="下一页"><a href="javascript:' + this.name + '.toPage(' + nextPage + ');">&#155;</a></span>';
                strHtml += '<span title="最后一页"><a href="javascript:' + this.name + '.toPage(' + this.pageCount + ');">&#187;</a></span>';
            }
            strHtml += '</span><br />';
    return strHtml;
}
showPages.prototype.createUrl  =  function (page)  ... { //生成页面跳转url
    if (isNaN(parseInt(page))) page = 1;
    if (page < 1) page = 1;
    if (page > this.pageCount) page = this.pageCount;
    var url = location.protocol + '//' + location.host + location.pathname;
    var args = location.search;
    var reg = new RegExp('([?&]?)' + this.argName + '=[^&]*[&$]?', 'gi');
    args = args.replace(reg,'$1');
    if (args == '' || args == null) ...{
        args += '?' + this.argName + '=' + page;
    } else if (args.substr(args.length - 1,1) == '?' || args.substr(args.length - 1,1) == '&') ...{
            args += this.argName + '=' + page;
    } else ...{
            args += '&' + this.argName + '=' + page;
    }
    return url + args;
}
showPages.prototype.toPage  =  function(page) ... { //页面跳转
    var turnTo = 1;
    if (typeof(page) == 'object') ...{
        turnTo = page.options[page.selectedIndex].value;
    } else ...{
        turnTo = page;
    }
    self.location.href = this.createUrl(turnTo);
}
showPages.prototype.printHtml  =  function() ... { //显示html代码
    this.getPage();
    this.checkPages();
    this.showTimes += 1;
    document.write('<div id="pages_' + this.name + '_' + this.showTimes + '" class="pages"></div>');
    document.getElementById('pages_' + this.name + '_' + this.showTimes).innerHTML = this.createHtml();
    
}
showPages.prototype.formatInputPage  =  function(e) ... { //限定输入页数格式
    var ie = navigator.appName=="Microsoft Internet Explorer"?true:false;
    if(!ie) var key = e.which;
    else var key = event.keyCode;
    if (key == 8 || key == 46 || (key >= 48 && key <= 57)) return true;
    return false;
}

 

using  System;
using  System.Data;
using  System.Configuration;
using  System.Web;
using  System.Web.Security;
using  System.Web.UI;
using  System.Web.UI.WebControls;
using  System.Web.UI.WebControls.WebParts;
using  System.Web.UI.HtmlControls;
using  System.Data.OleDb;

public   partial   class  _Default : System.Web.UI.Page 
... {
    string pageCount;
    public string PageCount
    ...{
        get ...{ return pageCount; }
        set ...{ pageCount = value; }
    }
    int currentPage;
    protected void Page_Load(object sender, EventArgs e)
    ...{
        if (Request.QueryString["Page"] != null)
            currentPage = Convert.ToInt32(Request.QueryString["Page"]);
        else
            currentPage = 1;

        CreateData(currentPage);
        
    }

    private void CreateData(int currentPage)
    ...{
        OleDbConnection myConn = new OleDbConnection("Provider=Microsoft.Jet.OLEDB.4.0;Data Source=|DataDirectory|data.mdb");
        PagedDataSource ps = new PagedDataSource();
        myConn.Open();
        //定义一个OleDbDataAdapter
        OleDbDataAdapter myAdapter = new OleDbDataAdapter("select xingzheng,faren,shiye,fading,zhusuo from [data]", myConn);
        DataSet ds = new DataSet();
        //填充数据
        myAdapter.Fill(ds);
        ps.DataSource = ds.Tables[0].DefaultView;
        ps.AllowPaging = true;
        ps.PageSize = 10;
        ps.CurrentPageIndex = currentPage - 1;
        pageCount = ps.PageCount.ToString();
        this.myRepeater.DataSource = ps;
        this.myRepeater.DataBind();
    }

    protected void Repeater1_ItemCommand(object source, RepeaterCommandEventArgs e)
    ...{

    }
}