1
- kkpager
1
+ kkpager v1.2
2
2
=======
3
3
4
4
js分页展示控件,传入简单参数就能使用的分页效果控件
@@ -11,13 +11,19 @@ js分页展示控件,传入简单参数就能使用的分页效果控件
11
11
<script type =" text/javascript" src =" ../src/kkpager.min.js" ></script >
12
12
<link rel =" stylesheet" type =" text/css" href =" ../src/kkpager.css" />
13
13
```
14
+ ### HTML DOM容器
15
+ ``` html
16
+ <div id =" kkpager" ></div >
17
+ ```
14
18
### 调用方法
19
+
20
+ #### 1、使用link模式
15
21
``` html
16
- <div id =" kkpager" ></div >
17
22
<script type =" text/javascript" >
18
23
// 生成分页控件
19
- kkpager .init ({
24
+ kkpager .generPageHtml ({
20
25
pno : ' ${p.pageNo}' ,
26
+ mode : ' link' , // 可选,默认就是link
21
27
// 总页码
22
28
total : ' ${p.totalPage}' ,
23
29
// 总数据条数
@@ -40,13 +46,46 @@ kkpager.init({
40
46
return this .hrefFormer + ' _' + n + this .hrefLatter ;
41
47
}
42
48
43
- });
44
- kkpager .generPageHtml ();
49
+ });
45
50
</script >
46
51
```
47
52
getLink 参数需要按需要重写。
48
53
49
54
55
+ #### 2、使用click模式(自定义跳转函数)
56
+ ``` html
57
+ <script type =" text/javascript" >
58
+ // 生成分页控件
59
+ kkpager .generPageHtml ({
60
+ pno : ' ${p.pageNo}' ,
61
+ mode : ' click' , // 设置为click模式
62
+ // 总页码
63
+ total : ' ${p.totalPage}' ,
64
+ // 总数据条数
65
+ totalRecords : ' ${p.totalCount}' ,
66
+ // 链接前部
67
+ hrefFormer : ' ${hrefFormer}' ,
68
+ // 链接尾部
69
+ hrefLatter : ' ${hrefLatter}' ,
70
+ // 点击页码、页码输入框跳转、以及首页、下一页等按钮都会调用click
71
+ // 适用于不刷新页面,比如ajax
72
+ click : function (n ){
73
+ // 这里可以做自已的处理
74
+ // ...
75
+ // 处理完后可以手动条用selectPage进行页码选中切换
76
+ this .selectPage (n);
77
+ },
78
+ // getHref是在click模式下可选的重写函数,默认代码如下
79
+ getHref : function (n ){
80
+ return ' #' ;
81
+ }
82
+
83
+ });
84
+ </script >
85
+ ```
86
+ click 参数需要按需要重写,而getHref一般需要配置。
87
+
88
+
50
89
### 必选参数
51
90
> ` pno ` 当前页码
52
91
@@ -57,10 +96,20 @@ getLink 参数需要按需要重写。
57
96
### 可选参数
58
97
> ` pagerid ` 分页展示控件容器ID ` 字符串 ` 默认值 'kkpager'
59
98
99
+ > ` mode ` 模式,click或link ` 字符串 ` 默认值 'link'
100
+
60
101
> ` isShowTotalPage ` 是否显示总页数 ` 布尔型 ` 默认值 true
61
102
62
103
> ` isShowTotalRecords ` 是否显示总记录数 ` 布尔型 ` 默认值 true
63
104
105
+ > ` isShowFirstPageBtn ` 是否显示首页按钮 ` 布尔型 ` 默认值 true
106
+
107
+ > ` isShowLastPageBtn ` 是否显示尾页按钮 ` 布尔型 ` 默认值 true
108
+
109
+ > ` isShowPrePageBtn ` 是否显示上一页按钮 ` 布尔型 ` 默认值 true
110
+
111
+ > ` isShowNextPageBtn ` 是否显示下一页按钮 ` 布尔型 ` 默认值 true
112
+
64
113
> ` isGoPage ` 是否显示页码跳转输入框 ` 布尔型 ` 默认值 true
65
114
66
115
> ` hrefFormer ` 链接前部 ` 字符串 ` 默认值 ''
@@ -69,10 +118,22 @@ getLink 参数需要按需要重写。
69
118
70
119
> ` lang ` 语言配置对象,属性配置列表:
71
120
121
+ > - ` firstPageText ` 首页按钮文本 ` 字符串 ` 默认值 '首页'
122
+
123
+ > - ` firstPageTipText ` 首页按钮提示文本 ` 字符串 ` 默认值 '首页'
124
+
125
+ > - ` lastPageText ` 尾页按钮文本 ` 字符串 ` 默认值 '尾页'
126
+
127
+ > - ` lastPageTipText ` 尾页按钮提示文本 ` 字符串 ` 默认值 '尾页'
128
+
72
129
> - ` prePageText ` 上一页按钮文本 ` 字符串 ` 默认值 '上一页'
73
130
131
+ > - ` prePageTipText ` 上一页按钮提示文本 ` 字符串 ` 默认值 '上一页'
132
+
74
133
> - ` nextPageText ` 下一页按钮文本 ` 字符串 ` 默认值 '下一页'
75
134
135
+ > - ` nextPageTipText ` 下一页提示按钮文本 ` 字符串 ` 默认值 '下一页'
136
+
76
137
> - ` totalPageBeforeText ` 总页数前缀文本 ` 字符串 ` 默认值 '共'
77
138
78
139
> - ` totalPageAfterText ` 总页数后缀文本 ` 字符串 ` 默认值 '页'
0 commit comments