分页功能在项目中时常用到, 在前段时间的工作中使用到一款pagination分页插件,在此做以下总结:
(一) 具体使用方法:
1. 引入相关的JS及CSS文件
<link rel="stylesheet" href="pagination.css" />
<script src="jquery.pagination.js"></script>
2. 引入一个div标签:
<div class="M-box"></div>
3.引入一段JS代码:
// 当前页
var pagenow = 1;
//总页数
var pageall = 0;
function loadPages(pageall) {
$('.M-box').pagination({
pageCount: pageall,
jump: true,
coping: true,
current: pagenow,
homePage: '首页',
endPage: '末页',
prevContent: '上页',
nextContent: '下页',
callback: function(p) {
pagenow = p.getCurrent();
//回调逻辑
}
});
}
(二) 核心方法分析:
$('.M-box').pagination({option})
option的参数如下:
pageCount 9 总页数
totalData 0 数据总条数
current 1 当前第几页
showData 0 每页显示的条数
prevCls 'prev' 上一页class
nextCls 'next' 下一页class
prevContent '<' 上一页节点内容
nextContent '>' 下一页节点内容
activeCls 'active' 当前页选中状态class名
count 3 当前选中页前后页数
coping false 是否开启首页和末页,值为boolean
isHide false 总页数为0或1时隐藏分页控件
keepShowPN false 是否一直显示上一页下一页
homePage '' 首页节点内容,默认为空
endPage '' 尾页节点内容,默认为空
jump false 是否开启跳转到指定页数,值为boolean类型
jumpIptCls 'jump-ipt' 文本框内容
jumpBtnCls 'jump-btn' 跳转按钮class
jumpBtn '跳转' 跳转按钮文本内容
callback function(){} 回调函数,参数"index"为当前页
其中回调函数是最核心的参数,即点击分页的数字按钮时所执行的操作,回调函数中有一个参数叫p
callback:function(p){
//回调函数....
}
该回调函数相关接绍如下:
getPageCount() 获取总页数
setPageCount(page) 设置总页数
getCurrent()获取当前页
filling() 填充数据,参数为页数
(三) AJAX动态动态获取分页数据:
请求参数1: 每页的记录数 pageSize
请求参数2: 当前的页码 pageNow
响应参数1: 每页的记录数据List
响应参数2: 记录总数 totalCount
通过相应参数 获取总页数: var pageall = Math.ceil(totalCount / pageSize);
分页中的回调函数的操作,也就是点击按钮需要做什么??点击按钮需要重新发起AJAX请求,需要把每页显示条数和当前的页数传回给服务器,loadPages(pageall),然后再次发起AJAX请求,如此往复.
(四) 总结
一个很主要的流程总结起来就是: 首先要发起ajax得到总记录数和返回的每页数据, 然后在success回调中使用pagination的方法,在callback回调中再次发起ajax,就是为了点击分页按钮再次显示数据。
深入了解: http://maxiaoxiang.com/jQuery-plugins/plugins/pagination.html