首先下载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