jQuery+ROW_NUMBER实现超级简单分页（不可错过）

页面分页对于程序员来说最熟悉不过，在WEB开发中经常需要对页面进行分页，jQuery插件JQuery Pager分页器能轻松实现javascript分页功能，只需要几行代码，就可以轻松搞定， 实例效果图如下：

简单明了，下面我介绍一下实现过程：

      首先需要使用 jQuery库文件和 JQuery Pager库文件，请点击下载。

      分页样式page.css会在你下载的jQuery库文件里面，当然你可以选择拷贝下面，或者自己做修改 

#pager ul.pages {
display: block;
border: none;
text-transform: uppercase;
font-size: 10px;
margin: 10px 0 50px;
padding: 0;
}

#pager ul.pages li {
list-style: none;
float: left;
border: 1px solid #ccc;
text-decoration: none;
margin: 0 5px 0 0;
padding: 5px;
}

#pager ul.pages li:hover {
border: 1px solid #003f7e;
}

#pager ul.pages li.pgEmpty {
border: 1px solid #eee;
color: #eee;
}

#pager ul.pages li.pgCurrent {
border: 1px solid #003f7e;
color: #000;
font-weight: 700;
background-color: #eee;
}

接下来，我们来看看jQuery实现代码段：

<script type= "text/javascript" language= "javascript">
             var page=document.getElementById( "hPage").value;
             var count=document.getElementById( "hCount").value;
            $(document).ready( function() {
            $( "#pager").pager({ pagenumber: page, pagecount: count, buttonClickCallback: PageClick });});
            PageClick = function(pageclickednumber)    
            {
                window.location.href= "jQuery_Page.aspx?page="+pageclickednumber;
            }
</script>

下面则是html页面代码

< form runat ="server" >
< h1 id ="result" >jQuery分页器 </h1>
     < asp:Repeater ID ="Repeater1" runat ="server" >
                 < HeaderTemplate >
                 < table width ="100%" border ="1" cellspacing ="0" cellpadding ="4" style ="border-collapse:collapse" >
                 < tr style ="backGround-color:#CCCCFF" > < th style ="width:15%" >IP编号 </th> < th style ="width:15%" >IP开始段 </th> < th style ="width:30%" >IP结束段 </th> < th style ="width:20%" >归属地 </th> < th style ="width:20%" >操作 </th> </tr>
                 </HeaderTemplate>
                 < ItemTemplate >
                 < tr style ="background-color:#FAF3DC" >
                 < td > < %# Eval("IPid")% > </td>
                 < td > < %# Eval("IPFrom")% > </td>
                 < td > < %# Eval("IPTo")% > </td>
                 < td > < %# Eval("IPLocation")% > </td>
                 < td > </td>
                 </tr>
                 </ItemTemplate>
                 < AlternatingItemTemplate >
                 < tr style ="background-color:#eaeaea" >
                 < td > < %# Eval("IPid")% > </td>
                 < td > < %# Eval("IPFrom")% > </td>
                 < td > < %# Eval("IPTo")% > </td>
                 < td > < %# Eval("IPLocation")% > </td>
                 < td > </td>
                 </tr>
                 </AlternatingItemTemplate>
                 < FooterTemplate >
                 </table>
                 </FooterTemplate>
                 </asp:Repeater>
                 < br />
< div id ="pager" > </div>
    
</form>

jQuery+ROW_NUMBER实现超级简单分页（不可错过）

      页面分页对于程序员来说最熟悉不过，在WEB开发中经常需要对页面进行分页，jQuery插件JQuery Pager分页器能轻松实现javascript分页功能，只需要几行代码，就可以轻松搞定， 实例效果图如下： 

      简单明了，下面我介绍一下实现过程：

      首先需要使用 jQuery库文件和 JQuery Pager库文件，请点击下载。

      分页样式page.css会在你下载的jQuery库文件里面，当然你可以选择拷贝下面，或者自己做修改 

Code
#pager ul.pages {
display:block;
border:none;
text-transform:uppercase;
font-size:10px;
margin:10px 0 50px;
padding:0;
}

#pager ul.pages li {
list-style:none;
float:left;
border:1px solid #ccc;
text-decoration:none;
margin:0 5px 0 0;
padding:5px;
}

#pager ul.pages li:hover {
border:1px solid #003f7e;
}

#pager ul.pages li.pgEmpty {
border:1px solid #eee;
color:#eee;
}

#pager ul.pages li.pgCurrent {
border:1px solid #003f7e;
color:#000;
font-weight:700;
background-color:#eee;
}

     接下来，我们来看看jQuery实现代码段：

Code
<script type="text/javascript" language="javascript">
      var page=document.getElementById("hPage").value;
      var count=document.getElementById("hCount").value;
      $(document).ready(function() {
      $("#pager").pager({ pagenumber: page, pagecount: count, buttonClickCallback: PageClick });});
      PageClick = function(pageclickednumber) 
      {
        window.location.href="jQuery_Page.aspx?page="+pageclickednumber;
      }
</script>

     下面则是html页面代码

Code
<form runat="server">
 <h1 id="result">jQuery分页器</h1>
  <asp:Repeater ID="Repeater1" runat="server">
        <HeaderTemplate>
        <table width="100%" border="1" cellspacing="0" cellpadding="4" style="border-collapse:collapse">
        <tr style="backGround-color:#CCCCFF"><th style="width:15%">IP编号</th><th style="width:15%">IP开始段</th><th style="width:30%">IP结束段</th><th style="width:20%">归属地</th><th style="width:20%">操作</th></tr>
        </HeaderTemplate>
        <ItemTemplate>
        <tr style="background-color:#FAF3DC">
        <td><%# Eval("IPid")%></td>
        <td><%# Eval("IPFrom")%></td>
        <td><%# Eval("IPTo")%></td>
        <td><%# Eval("IPLocation")%></td>
        <td></td>
        </tr>
        </ItemTemplate>
        <AlternatingItemTemplate>
        <tr style="background-color:#eaeaea">
        <td><%# Eval("IPid")%></td>
        <td><%# Eval("IPFrom")%></td>
        <td><%# Eval("IPTo")%></td>
        <td><%# Eval("IPLocation")%></td>
        <td></td>
        </tr>
        </AlternatingItemTemplate>
        <FooterTemplate>
        </table>
        </FooterTemplate>
        </asp:Repeater>
        <br />
 <div id="pager" ></div>
 
</form>

当然这里要注意的是 <div id="pager" ></div>，它就是jQuery的分页控件，如果大家对他的样式不满意可以自行修改。下面我们来看看C#实现代码：

public partial class Page_jQuery_Page : System.Web.UI.Page
{
         public int count; //数据条数
         public int page = 1; //当前页
         public int pagecount = 5; //每页显示数据条数
         protected void Page_Load( object sender, EventArgs e)
        {
                 if (!IsPostBack)
                {
                        count = IPDAO.getCount();
                        Bind();
                }
        }
         public void Bind()
        {
                 if (Request.QueryString[ "page"] == null)
                {
                        page = 1;
                }
                 else
                {
                        page = int.Parse(Request.QueryString[ "page"]);
                }
                 int startIndex = page * pagecount + 1;
                 int endIndex = startIndex + pagecount - 1;
                DataTable dt = IPDAO.getPageDatatable(startIndex, endIndex);
                 this.Repeater1.DataSource = dt.DefaultView;
                 this.Repeater1.DataBind();
        }
}

 这里我没有将读数据库的代码放在这里，我想这个也是极其简单的，这里就不贴出来了，下面我将分页存储过程贴一下：

ALTER PROCEDURE [dbo].[P_GetPagedOrders2005]
(@startIndex INT,    
@endindex INT
)
AS
select * from ( SELECT ROW_NUMBER() OVER( ORDER BY IPid DESC) AS rownum,
[IPid],[IPFrom],[IPTo],[IPLocation],[IPCity],[IPToNumber],[IPFromNumber] from IPInfo) as U
WHERE rownum between @startIndex and @endIndex

这就是用ROW_NUMBER写的存储过程，简单吧，当然要注意需要传的两个参数：

int startIndex = page * pagecount + 1;
int endIndex = startIndex + pagecount - 1;

开始索引，结束索引，OK了！

      我看了网上的相关文章，很多直接是将jQuery的分页控件直接引用过来或者将必优博客的JQuery Pager分页器那篇文章直接转载，我觉得还是自己动手实现一下,OK！

 

转载于:https://blog.51cto.com/yangtongnet/161115