首先下载kkpager插件:https://github.com/pgkk/kkpager
1、将下载下来的js和css拷贝到项目中,在需要分页的页面引入kkpager插件所需的js和css,如下:
<script type="text/javascript" src="js/kkpager.js"></script> <script type="text/javascript" src="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 + "]"; } }
时间: 2024-10-13 21:44:10