页面分页对于程序员来说最熟悉不过,在WEB开发中经常需要对页面进行分页,jQuery插件JQuery Pager分页器能轻松实现javascript分页功能,只需要几行代码,就可以轻松搞定,实例效果图如下:
简单明了,下面我介绍一下实现过程:
首先需要使用jQuery库文件和JQuery Pager库文件,请点击下载。
分页样式page.css会在你下载的jQuery库文件里面,当然你可以选择拷贝下面,或者自己做修改
![](https://i-blog.csdnimg.cn/blog_migrate/0be121fa5b8988fbabbbc526af3b0fc0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/34031c708bfe702fe82d01ff5c6593aa.gif)
#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实现代码段:
![](https://i-blog.csdnimg.cn/blog_migrate/0be121fa5b8988fbabbbc526af3b0fc0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/34031c708bfe702fe82d01ff5c6593aa.gif)
<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页面代码
![](https://i-blog.csdnimg.cn/blog_migrate/34031c708bfe702fe82d01ff5c6593aa.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/0be121fa5b8988fbabbbc526af3b0fc0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/34031c708bfe702fe82d01ff5c6593aa.gif)
<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#实现代码:
![](https://i-blog.csdnimg.cn/blog_migrate/0be121fa5b8988fbabbbc526af3b0fc0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/34031c708bfe702fe82d01ff5c6593aa.gif)
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();
}
}
这里我没有将读数据库的代码放在这里,我想这个也是极其简单的,这里就不贴出来了,下面我将分页存储过程贴一下:
![](https://i-blog.csdnimg.cn/blog_migrate/0be121fa5b8988fbabbbc526af3b0fc0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/34031c708bfe702fe82d01ff5c6593aa.gif)
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!