jQuery分页插件--pagination使⽤总结分页功能在项⽬中时常⽤到, 在前段时间的⼯作中使⽤到⼀款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: '下页',
jquery下载文件插件
callback: function(p) {redis分布式锁的实现方式
pagenow = p.getCurrent();
//回调逻辑
solidworks正版多少钱一套}
});
}
(⼆) 核⼼⽅法分析:
$('.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"为当前页
怎么安装gcc编译器其中回调函数是最核⼼的参数,即点击分页的数字按钮时所执⾏的操作,回调函数中有⼀个参数叫p
callback:function(p){
//回调函数....
}
该回调函数相关接绍如下:
getPageCount()  获取总页数
setPageCount(page) 设置总页数
getCurrent()获取当前页
css实例文章
filling() 填充数据,参数为页数
(三) AJAX动态动态获取分页数据:
请求参数1: 每页的记录数 pageSize
请求参数2: 当前的页码 pageNow
响应参数1: 每页的记录数据List
响应参数2: 记录总数 totalCount
通过相应参数 获取总页数:  var pageall = il(totalCount / pageSize);
分页中的回调函数的操作,也就是点击按钮需要做什么??点击按钮需要重新发起AJAX请求,需要把每页显⽰条数和当前的页数传回给服务器,loadPages(pageall),然后再次发起AJAX请求,如此往复.
(四) 总结
⼀个很主要的流程总结起来就是: ⾸先要发起ajax得到总记录数和返回的每页数据, 然后在success回调中使⽤pagination的⽅法,在callback回调中再次发起ajax,就是为了点击分页按钮再次显⽰数据。