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,就是为了点击分页按钮再次显⽰数据。
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论