无刷新分页 jquery.pagination.js
序言
这一款js分页使用起来很爽，自己经常用，做项目时总是要翻以前的项目看，不方便，这里就把他写出来方便自己以后粘帖，也希望能分享给大家。
友情提示下：我有一片博客是用着个js实现的无刷新分页也很好用（这篇写的不是无刷新分页），链接地址为：无刷新分页 jquery.pagination.js
参数说明
| 参数名 | 描述 | 参数值 |
|---|---|---|
| maxentries | 总条目数 | 必选参数，整数 |
| items_per_page | 每页显示的条目数 | 可选参数，默认是10 |
| num_display_entries | 连续分页主体部分显示的分页条目数 | 可选参数，默认是10 |
| current_page | 当前选中的页面 | 可选参数，默认是0，表示第1页 |
| num_edge_entries | 两侧显示的首尾分页的条目数 | 可选参数，默认是0 |
| link_to | 分页的链接 | 字符串，可选参数，默认是"#" |
| prev_text | “前一页”分页按钮上显示的文字 | 字符串参数，可选，默认是"Prev" |
| next_text | “下一页”分页按钮上显示的文字 | 字符串参数，可选，默认是"Next" |
| ellipse_text | 省略的页数用什么文字表示 | 可选字符串参数，默认是"…" |
| prev_show_always | 是否显示“前一页”分页按钮 | 布尔型，可选参数，默认为true，即显示“前一页”按钮 |
| next_show_always | 是否显示“下一页”分页按钮 | 布尔型，可选参数，默认为true，即显示“下一页”按钮 |
| callback | 回调函数 | 当点击链接的时候此函数被调用，此函数接受两个参数，新一页的id和pagination容器（一个DOM元素）。如果回调函数返回false，则pagination事件停止执行 |
插件代码
js代码
View Codecss代码（有好几款样式供你选择，不错的）
View Code前端代码
<script src="../js/jquery.pagination.js" type="text/javascript"></script>
<link href="../css/pagination.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(function () {
function pageselectCallback(page_id, jq) {
//alert(page_id); 回调函数，进一步使用请参阅说明文档
}
$("#Pagination").pagination(<%=pcount%>, {
callback: pageselectCallback,//PageCallback() 为翻页调用次函数。
prev_text: " 上一页",
next_text: "下一页 ",
items_per_page: <%=pagesize %>, //每页的数据个数
num_display_entries: 3, //两侧首尾分页条目数
current_page: <%=page%>, //当前页码
num_edge_entries: 2, //连续分页主体部分分页条目数
link_to:"?page=__id__"
});
InterlacesColor(); //隔行换色(这个不是分页里面的js方法)
});
</script>
<asp:Repeater ID="Rpt_UserList" runat="server">
<ItemTemplate>
<tr>
<td>
<%# Eval("UserName")%>
</td>
</tr>
<ItemTemplate>
</asp:Repeater>
<div id="Pagination" class="right flickr"></div>
后台代码：
protected int pcount = 0; //总条数
protected int page = 0; //当前页
protected int pagesize = 5; //设置每页显示的大小
protected void Page_Load(object sender, EventArgs e)
{
if (!int.TryParse(Request.Params["page"] as string, out this.page))
{
page = 0;
}
}
#region 数据分页
public void PageBind(string where,string order)
{
bll = new UserAccount();
ds = new DataSet();
pcount = bll.GetPageCount(where);
ds = bll.GetDataByPage(page * pagesize,(page+1)*pagesize,order,where);
if (ds != null && ds.Tables[0].Rows.Count > 0)
{
Rpt_UserList.DataSource = ds;
Rpt_UserList.DataBind();
}
}
#endregion
样式效果展示：
<div id="Pagination" class="flickr"></div>
<div id="Pagination" class="meneame"></div>
<div id="Pagination" class="scott"></div>
<div id="Pagination" class="quotes"></div>
<div id="Pagination" class="black"></div>
好了在此就不疼了，自己用哪一款样式自己找吧，css里面有好多，不够用了，自己也可以修改为自己喜欢的样式。
再次友情链接：无刷新分页 jquery.pagination.js
补充： 多参数问题 （我的解决方案如下，谁有更好的可以分享下。）
$(function () {
function pageselectCallback(page_id, jq) {
TranUrl(page_id);
}
$("#Pagination").pagination(<%=pcount%>, {
callback: pageselectCallback,//PageCallback() 为翻页调用次函数。
prev_text: " 上一页",
next_text: "下一页 ",
items_per_page: <%=pagesize %>, //每页的数据个数
num_display_entries: 3, //两侧首尾分页条目数
current_page: <%=page%>, //当前页码
num_edge_entries: 2, //连续分页主体部分分页条目数
});
//通过修改url来达到分页效果。
function TranUrl(page_id){
var url=location.href;
var star;
if(url.indexOf("aspx?")>0)
{
if(url.indexOf("&page=")>0)
{
star=url.indexOf("&page=");
url=url.substring(0,star);
location.href=url+"&page="+page_id;
}
else{
location.href=url+"&page="+page_id;
}
}
else{
location.href=url+"?page="+page_id;
}
}
});
