html页面
//要显示内容表格<table id="gifts"> ???????????<tr class=‘first‘> ???????????????<th>时间</th> ???????????????<th>获得奖励</th> ???????????</tr> ???????????<tr> ???????????????<td>2018-01-30 00:00:00</td> ???????????????<td>2000金币</td> ???????????</tr></table>//显示分页的 page是自己定义的样式<div class="liuyanpage page"> ?</div> ??
插件最后生成的html结构
来,开始学习使用这个插件了
1、首先引入
<script type="text/javascript" src="js/jquery-1.8.3.js"></script> ?<script type="text/javascript" src="js/jquery.pagination.js"></script>
2、自定义插件
$(‘.liuyanpage‘).pagination({ ???????????????pageCount: Math.ceil(counts/one_page_show_nums),//counts为你要显示的数据的总条数,one_page_show_nums为你每页想要显示的条数 ???????????????coping: true, ???????????????homePage: ‘首页‘, ???????????????endPage: ‘末页‘, ???????????????prevContent: ‘上一页‘, ???????????????nextContent: ‘下一页‘, ???????????????count:2});
3、配置的参数
???????totalData: 0, //数据总条数 ???????showData: 0, //每页显示的条数 ???????pageCount: 9, //总页数,默认为9 ???????current: 1, //当前第几页 ???????prevCls: ‘prev‘, //上一页class ???????nextCls: ‘next‘, //下一页class ???????prevContent: ‘<‘, //上一页内容 ???????nextContent: ‘>‘, //下一页内容 ???????activeCls: ‘active‘, //当前页选中状态class名 ???????coping: false, //是否开启首页和末页,值为boolean ???????isHide: false, //当前页数为0页或者1页时不显示分页 ???????homePage: ‘‘, //首页节点内容,默认为空 ???????endPage: ‘‘, //尾页节点内容,默认为空 ???????keepShowPN: false, //是否一直显示上一页下一页 ???????count: 3, //当前页前后分页个数 ???????jump: false, //跳转到指定页数 ???????jumpIptCls: ‘jump-ipt‘, //文本框内容 ???????jumpBtnCls: ‘jump-btn‘, //跳转按钮 ???????jumpBtn: ‘跳转‘, //跳转按钮文本 ???????callback: function () { } //回调函数,参数"index"为当前页
api接口
方法 | 参数 | 说明 |
getPageCount() | 无 | 获取总页数 |
setPageCount(page) | page:页数 | 设置总页数 |
getCurrent() | 无 | 获取当前页 |
filling() | 无 | 填充数据,参数为页数 |
示例用法
$(function () { ???$(‘.liuyanpage‘).pagination({ ???????pageCount: <?# $counts?>/8, ???????coping: true, ???????homePage: ‘首页‘, ???????endPage: ‘末页‘, ???????prevContent: ‘上一页‘, ???????nextContent: ‘下一页‘, ???????count:2, ???????callback:PageCallback ???});//翻页function PageCallback(index, jq) { ???myapi(index);}
//请求function myapi(current) { ???$.post(url,{ ???????page:current ???},function(data){ ???????if(data.code!=0){ ???????}else{ ???????????var htm=‘‘; ???????????for(var i=0;i<data.mylist.length;i++){ ???????????????htm+=‘<tr><td>‘+data.mylist[i][‘createtime‘]+‘</td><td>‘+data.mylist[i][‘name‘]+‘</td></tr>‘ ???????????} ???????????$("#tc5 #gifts tr:not(.first)").remove(); ???????????$("#tc5 #gifts").append(htm);//将返回的数据追加到表格 ??????????} ???},‘json‘);}});
jquery.pagination.js的使用
原文地址:https://www.cnblogs.com/qiufang/p/9020145.html