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

jQuery+ROW_NUMBER实现超级简单分页(不可错过)

      简单明了,下面我介绍一下实现过程:

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

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


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实现代码段:


      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页面代码


 <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>

相关文章: