1、将下载下来的js和css拷贝到项目中，在需要分页的页面引入kkpager插件所需的js和css,如下：
<script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="js/kkpager.js"></script><script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="js/jquery-1.8.3.js"></script><link rel="stylesheet" type="text/css" href="css/kkpager_orange.css">
其中css有两个，一个是橘色的，一个是蓝色的，选择喜欢的颜色任意引入一个就可以。
2、在需要分页的页面添加div：
<div id="kkpager"></div>
3、因为使用时这个插件初始化页面时代码挺多，所以我就新建了一个js文件，并在其中封装了一个初始化的方法。
新建common.js(记得将这个js引入到要分页的页面哦),定义方法initPage;
/** * 生成分页控件 nowPage:当前页 totalPage:总页数 totalRows：总记录条数 rows:每页显示多少条 fun：要调用的函数 一般写填充表格数据的逻辑 */function initPage(nowPage,totalPage,totalRows,rows,fun){ //生成分页控件 kkpager.generPageHtml({ pno : nowPage, mode : 'click', //设置为click模式 //总页码 total : totalPage, //总数据条数 totalRecords : totalRows, //点击页码、页码输入框跳转、以及首页、下一页等按钮都会调用click //适用于不刷新页面，比如ajax click : function(n){ //这里可以做自已的处理 //... //点击要调用的函数 参数1 当前页数 参数2 每页显示的条数 fun(n,rows); //处理完后可以手动条用selectPage进行页码选中切换 this.selectPage(n); }, //getHref是在click模式下链接算法，一般不需要配置，默认代码如下 getHref : function(n){ return '#'; }});}这样基本就搞定了。
4、在需要分页的的页面使用，其实现在只要直接调用comom.js中定义好的方法即可。
<script type="text/javascript">//自定义方法，获取数据并加载/* nowPage:当前页 rows：每页显示的数据条数*/function loadInfor(nowPage,rows){ //TODO（例：发送ajax请求，从后台获取数据，构建动态表格之类的……） //其中的10 和100 可以是从后台获取的真实数据 //loadInfor是当前这个函数，作为参数传入是为了initPage中的click点击事件 initPage(nowPage,10,100,rows,loadInfor);} $(function(){ //kkpager.pno :插件提供的方法，获取当前页码 loadInfor(kkpager.pno,10); });</script></head><body> <div id="kkpager"></div></body>页面效果：
如果有真实的数据，效果就更鲜明了，完毕！
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
额外的：PageUtil.java,后台封装页面所需的分页数据，一并奉上！
public class PageUtil implements java.io.Serializable{ /** * serialVersionUID */ private static final long serialVersionUID = 1L; // 当前页 private Integer page; // 每页多少条 private Integer rows; // 总页数 private Integer totalPage; // 总记录条数 private Integer totalRows; public Integer getPage() { return page; } public void setPage(Integer page) { this.page = page; } public Integer getRows() { if(rows==null){ rows=10; } return rows; } public void setRows(Integer rows) { this.rows = rows; } public Integer getTotalPage() { if(totalRows==null){ totalRows=0; } if (totalRows % getRows() == 0) { totalPage = totalRows / getRows(); } else { totalPage = totalRows / getRows() + 1; } return totalPage; } public void setTotalPage(Integer totalPage) { this.totalPage = totalPage; } public Integer getTotalRows() { return totalRows; } public void setTotalRows(Integer totalRows) { this.totalRows = totalRows; } public PageUtil(Integer page, Integer rows, Integer totalPage, Integer totalRows) { super(); this.page = page; this.rows = rows; this.totalPage = totalPage; this.totalRows = totalRows; } public PageUtil() { super(); } @Override public String toString() { return "PageUtil [page=" + page + ", rows=" + rows + "]"; }}
点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
相关文章推荐
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦