jquery.pagination.js
是个简单轻量级的分页插件,使用起来很容易,只要初始化一个实例,并设置总数量、翻页回调函数、其它参数就可以实现无刷新分页功能了
js
文件:<link href="Scripts/pagination.css" rel="stylesheet" type="text/css" />
<script src="../Scripts/jquery-1.7.2.min.js" type="text/javascript"></script> // 个人发现插件对1.4版不支持
<script src="Scripts/jquery.pagination.js" type="text/javascript"></script>
html
代码,在页面添加一个div
<div id="pagination">
</div>
javascript
代码,实例化分页插件 $(function () {
var pageCount=50; //分页总数量
// $("#pagination").pagination(pageCount); //简单初始化方法
$("#pagination").pagination(pageCount, //分布总数量,必须参数
{
callback: PageCallback, //PageCallback() 为翻页调用次函数。
prev_text: "« 上一页",
next_text: "下一页 »",
items_per_page:10,
num_edge_entries: 2, //两侧首尾分页条目数
num_display_entries: 10, //连续分页主体部分分页条目数
current_page: 0, //当前页索引
link_to: "?id=__id__" //分页的js中会自动把"__id__"替换为当前的数。0
});
});
function PageCallback(page_index,jq)
{
$.ajax({
type: "POST",
dataType: "text",
url: '后台处理地址', //提交到一般处理程序请求数据
data: "pageIndex=" + (pageIndex) + "&pageSize=" + pageSize, //提交两个参数:pageIndex(页面索引),pageSize(显示条数)
success: function(data) {
//后台服务返回数据,重新加载数据
}
});
}
pagination()
方法参数参数名 | 描述 | 参数值 |
---|---|---|
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事件停止执行 |
load_first_page | 初始化时是否执行回调函数 | 如果为true则当插件初始化时回调函数被执行。如果你通过ajax来显示内容,那么在初始化分页插件时应把它设置为false;默认值: true |
// 自定义事件触发分页
// 跳到第3页
$("#pagination").trigger('setPage', [2]);
// 下一页
$("#pagination").trigger('nextPage');
// 上一页
$("#pagination").trigger('prevPage');
后台代码就贴出来了,一般是返回json
格式的数据到前面处理。
总结:JqueryPagination使用简单,只需要设置参数和回调函数就可以用,通过回调函数处理 翻页触发的事件,比较灵活。