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

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

1
2
3
< 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：

1
< div  id = "kkpager" ></ div >

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
/**
  * 生成分页控件
    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中定义好的方法即可。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
< 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 >

页面效果：


wKioL1cfEgmDkT9FAAAOQYOoco0298.png


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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
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 +  "]" ;
     }
 
}

本文转自 兴趣e族 51CTO博客，原文链接:http://blog.51cto.com/simplelife/1767880