首先下载kkpager插件：https://github.com/pgkk/kkpager

1、将下载下来的js和css拷贝到项目中，在需要分页的页面引入kkpager插件所需的js和css,如下：

<scripttype="text/javascript"src="js/kkpager.js"></script><scripttype="text/javascript"src="js/jquery-1.8.3.js"></script><linkrel="stylesheet"type="text/css"href="css/kkpager_orange.css">

其中css有两个，一个是橘色的，一个是蓝色的，选择喜欢的颜色任意引入一个就可以。

2、在需要分页的页面添加div：

<divid="kkpager"></div>

3、因为使用时这个插件初始化页面时代码挺多，所以我就新建了一个js文件，并在其中封装了一个初始化的方法。

新建common.js(记得将这个js引入到要分页的页面哦),定义方法initPage;

/***生成分页控件nowPage:当前页totalPage:总页数totalRows：总记录条数rows:每页显示多少条fun：要调用的函数一般写填充表格数据的逻辑*/functioninitPage(nowPage,totalPage,totalRows,rows,fun){//生成分页控件kkpager.generPageHtml({pno:nowPage,mode:'click',//设置为click模式//总页码total:totalPage,//总数据条数totalRecords:totalRows,//点击页码、页码输入框跳转、以及首页、下一页等按钮都会调用click//适用于不刷新页面，比如ajaxclick:function(n){//这里可以做自已的处理//...//点击要调用的函数参数1当前页数参数2每页显示的条数fun(n,rows);//处理完后可以手动条用selectPage进行页码选中切换this.selectPage(n);},//getHref是在click模式下链接算法，一般不需要配置，默认代码如下getHref:function(n){return'#';}});}

这样基本就搞定了。

4、在需要分页的的页面使用，其实现在只要直接调用comom.js中定义好的方法即可。

<scripttype="text/javascript">//自定义方法，获取数据并加载/*nowPage:当前页rows：每页显示的数据条数*/functionloadInfor(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><divid="kkpager"></div></body>

页面效果：



如果有真实的数据，效果就更鲜明了，完毕！

++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

额外的：PageUtil.java,后台封装页面所需的分页数据，一并奉上！

publicclassPageUtilimplementsjava.io.Serializable{/***serialVersionUID*/privatestaticfinallongserialVersionUID=1L;//当前页privateIntegerpage;//每页多少条privateIntegerrows;//总页数privateIntegertotalPage;//总记录条数privateIntegertotalRows;publicIntegergetPage(){returnpage;}publicvoidsetPage(Integerpage){this.page=page;}publicIntegergetRows(){if(rows==null){rows=10;}returnrows;}publicvoidsetRows(Integerrows){this.rows=rows;}publicIntegergetTotalPage(){if(totalRows==null){totalRows=0;}if(totalRows%getRows()==0){totalPage=totalRows/getRows();}else{totalPage=totalRows/getRows()+1;}returntotalPage;}publicvoidsetTotalPage(IntegertotalPage){this.totalPage=totalPage;}publicIntegergetTotalRows(){returntotalRows;}publicvoidsetTotalRows(IntegertotalRows){this.totalRows=totalRows;}publicPageUtil(Integerpage,Integerrows,IntegertotalPage,IntegertotalRows){super();this.page=page;this.rows=rows;this.totalPage=totalPage;this.totalRows=totalRows;}publicPageUtil(){super();}@OverridepublicStringtoString(){return"PageUtil[page="+page+",rows="+rows+"]";}}