jquery分页展示控件:kkpager
kkpager v1.2
js分页展示控件,传入简单参数就能使用的分页效果控件
准备工作,引入js、css
<script type="text/javascript" src="../lib/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="../src/kkpager.min.js"></script>
<link rel="stylesheet" type="text/css" href="../src/kkpager_blue.css" />
HTML DOM容器
<div id="kkpager"></div>
调用方法
1、使用link模式
<script type="text/javascript">
//生成分页控件
kkpager.generPageHtml({
pno : '${p.pageNo}',
mode : 'link', //可选,默认就是link
//总页码
total : '${p.totalPage}',
//总数据条数
totalRecords : '${p.totalCount}',
//链接前部
hrefFormer : '${hrefFormer}',
//链接尾部
hrefLatter : '${hrefLatter}',
//链接算法
getLink : function(n){
//这里是默认算法,算法适用于比如:
//hrefFormer=http://www.xx.com/news/20131212
//hrefLatter=.html
//那么首页(第1页)就是http://www.xx.com/news/20131212.html
//第2页就是http://www.xx.com/news/20131212_2.html
//第n页就是http://www.xx.com/news/20131212_n.html
if(n == 1){
return this.hrefFormer + this.hrefLatter;
}
return this.hrefFormer + '_' + n + this.hrefLatter;
} });
</script>
getLink 参数需要按需要重写。
2、使用click模式(自定义跳转函数)
<script type="text/javascript">
//生成分页控件
kkpager.generPageHtml({
pno : '${p.pageNo}',
mode : 'click', //设置为click模式
//总页码
total : '${p.totalPage}',
//总数据条数
totalRecords : '${p.totalCount}',
//点击页码、页码输入框跳转、以及首页、下一页等按钮都会调用click
//适用于不刷新页面,比如ajax
click : function(n){
//这里可以做自已的处理
//...
//处理完后可以手动条用selectPage进行页码选中切换
this.selectPage(n);
},
//getHref是在click模式下链接算法,一般不需要配置,默认代码如下
getHref : function(n){
return '#';
} });
</script>
click 参数需要按需要重写,而getHref一般需要配置。
必选参数
pno
当前页码
total
总页码
totalRecords
总数据条数
可选参数
pagerid
分页展示控件容器ID字符串
默认值 'kkpager'
mode
模式,click或link字符串
默认值 'link'
isShowTotalPage
是否显示总页数布尔型
默认值 true
isShowCurrPage
是否显示当前页布尔型
默认值 true
isShowTotalRecords
是否显示总记录数布尔型
默认值 false (当isShowTotalPage
为true
时,此设置无效)
isShowFirstPageBtn
是否显示首页按钮布尔型
默认值 true
isShowLastPageBtn
是否显示尾页按钮布尔型
默认值 true
isShowPrePageBtn
是否显示上一页按钮布尔型
默认值 true
isShowNextPageBtn
是否显示下一页按钮布尔型
默认值 true
isGoPage
是否显示页码跳转输入框布尔型
默认值 true
isWrapedPageBtns
是否用span包裹住页码按钮布尔型
默认值 true
isWrapedInfoTextAndGoPageBtn
是否用span包裹住分页信息和跳转按钮布尔型
默认值 true
hrefFormer
链接前部字符串
默认值 ''
hrefLatter
链接尾部字符串
默认值 ''
lang
语言配置对象,属性配置列表:
firstPageText
首页按钮文本字符串
默认值 '首页'
firstPageTipText
首页按钮提示文本字符串
默认值 '首页'
lastPageText
尾页按钮文本字符串
默认值 '尾页'
lastPageTipText
尾页按钮提示文本字符串
默认值 '尾页'
prePageText
上一页按钮文本字符串
默认值 '上一页'
prePageTipText
上一页按钮提示文本字符串
默认值 '上一页'
nextPageText
下一页按钮文本字符串
默认值 '下一页'
nextPageTipText
下一页提示按钮文本字符串
默认值 '下一页'
totalPageBeforeText
总页数前缀文本字符串
默认值 '共'
totalPageAfterText
总页数后缀文本字符串
默认值 '页'
currPageBeforeText
当前页前缀文本字符串
默认值 '当前第'
currPageAfterText
当前页后缀文本字符串
默认值 '页'
totalInfoSplitStr
分页统计信息部分的分隔符字符串
默认值 '/'
totalRecordsBeforeText
总记录数前缀文本字符串
默认值 '共'
totalRecordsAfterText
总记录数后缀文本字符串
默认值 '条数据'
gopageBeforeText
跳转前缀文本字符串
默认值 '转到'
gopageAfterText
跳转前缀文本字符串
默认值 '页'
gopageButtonOkText
跳转按钮文本字符串
默认值 '确定'
buttonTipBeforeText
页码按钮提示信息前缀字符串
默认值 '第'
buttonTipAfterText
页码按钮提示信息后缀字符串
默认值 '页'
gopageWrapId
页码跳转dom ID字符串
默认值 'kkpager_gopage_wrap'
gopageButtonId
页码跳转按钮dom ID字符串
默认值 'kkpager_btn_go'
gopageTextboxId
页码输入框dom ID字符串
默认值 'kkpager_btn_go_input'
getLink
链接算法函数(仅适用于mode为link)函数类型
click
自定义事件处理函数(仅适用于mode为click)函数类型
getHref
链接算法函数(仅适用于mode为click)函数类型
公开方法
selectPage
手动调用此函数选中某个页码
//选中第2页码
kkpager.selectPage(2);
默认链接算法,按需重写
//默认链接算法函数,使用时需要按需要重写
getLink : function(n){
//这里的算法适用于比如:
//hrefFormer=http://www.xx.com/news/20131212
//hrefLatter=.html
//那么首页(第1页)就是http://www.xx.com/news/20131212.html
//第2页就是http://www.xx.com/news/20131212_2.html
//第n页就是http://www.xx.com/news/20131212_n.html
if(n == 1){
return this.hrefFormer + this.hrefLatter;
}
return this.hrefFormer + '_' + n + this.hrefLatter;
}
jquery分页展示控件:kkpager的更多相关文章
- jQuery控件之分页控件-- kkpager v1.3使用简介
js分页展示控件,传入简单参数就能使用的分页效果控件 在线测试链接: http://pgkk.github.io/kkpager/example/pager_test.html http://pgkk ...
- 基于jQuery 常用WEB控件收集
Horizontal accordion: jQuery 基于jQuery开发,非常简单的水平方向折叠控件. Horizontal accordion: jQuery jQuery-Horizonta ...
- 一些基于jQuery开发的控件
基于jQuery开发,非常简单的水平方向折叠控件.主页:http://letmehaveblog.blogspot.com/2007/10/haccordion-simple-horizontal-a ...
- jquery 双向select控件bootstrap Dual listbox
http://www.cnblogs.com/hangwei/p/5040866.html -->jquery 双向select控件bootstrap Dual listboxhtt ...
- 基于Bootstrap的JQuery TreeView树形控件,数据支持json字符串、list集合(MVC5)<二>
上篇博客给大家介绍了基于Bootstrap的JQuery TreeView树形控件,数据支持json字符串.list集合(MVC5)<一>, 其中的两种方式都显得有些冗余.接着上篇博客继续 ...
- 模仿win10样式,基于jquery的时间控件
工作需要,写了一个基于jquery的时间控件,仿win10系统时间控件格式. 目前基本功能都有了,但时间格式只实现少数,但由于结构设计已经充分优化,填充起来非常容易. 这个控件相对网上其他的时间控件, ...
- Jquery 操作Html 控件 CheckBox、Radio、Select 控件 【转】http://www.cnblogs.com/lxblog/archive/2013/01/09/2853056.html
Jquery 操作Html 控件 CheckBox.Radio.Select 控件 在使用 Javascript 编写前台脚本的时候,经常会操作 Html 控件,比如 checkbox.radio ...
- jquery插件——日历控件
今天在网上有看到一个jquery插件——日历控件,不过之前也在柯乐义的网站上看到了(http://keleyi.com/ 推荐下) 这个插件看着比较大气,所以干脆也分享下,以后自己也好用一点儿 1.页 ...
- 弹出框页面中使用jquery.validate验证控件
弹出框页面中使用jquery.validate验证控件有几个问题需要解决: 1,弹出框的提交事件完成后如何关闭弹出框页面? 2,提交不成功如何返回当前页? 3,如果知道验证事件成功? 之前笔者都是JS ...
随机推荐
- Java方法注意事项
使用方法的注意事项: 1.方法应该定义在类中,方法中不能再定义方法,也就是不能嵌套定义,但方法可以中可以调用方法 2.方法定义的前后顺序无所谓,执行的先后顺序只与调用有关 3.方法定义之后不会执行,如 ...
- win32线程栈溢出问题 (一)
一.什么是线程栈溢出 我们都知道,每一个win32线程都会开辟一个空间,用来临时存储线程执行时所调用的一系列函数的参数.返回地址和局部变量及其他上下文信息.这个空间就是线程的栈区.栈区的容量是有限的, ...
- Problem 3 二维差分
$des$ 考虑一个 n ∗ n 的矩阵 A,初始所有元素均为 0.执行 q 次如下形式的操作: 给定 4 个整数 r,c,l,s, 对于每个满足 x ∈ [r,r+l), y ∈ [c,x−r+c] ...
- BZOJ 2333: [SCOI2011]棘手的操作
题目描述 真的是个很棘手的操作.. 注意每删除一个点,就需要clear一次. #include<complex> #include<cstdio> using namespac ...
- Bzoj 2440: [中山市选2011]完全平方数(莫比乌斯函数+容斥原理+二分答案)
2440: [中山市选2011]完全平方数 Time Limit: 10 Sec Memory Limit: 128 MB Description 小 X 自幼就很喜欢数.但奇怪的是,他十分讨厌完全平 ...
- python 之 字典常用操作
- 《挑战30天C++入门极限》图例实解:C++中类的继承特性
图例实解:C++中类的继承特性 整个c++程序设计全面围绕面向对象的方式进行,类的继承特性是c++的一个非常非常重要的机制,继承特性可以使一个新类获得其父类的操作和数据结构,程序员只需在新类中 ...
- [ZJOI2007][BZOJ1060]时态同步
Description 小Q在电子工艺实习课上学习焊接电路板.一块电路板由若干个元件组成,我们不妨称之为节点,并将其用数 字1,2,3….进行标号.电路板的各个节点由若干不相交的导线相连接,且对于电路 ...
- VMware workstation虚拟机与真机之间复制文件
首先选择导航栏的“虚拟机”选项,在下拉菜单中选择“安装VMware Tools” 弹出自动播放的选项,选择安装setup64.exe 开始安装VMware Tools,安装过程都保持默认即可,一直点 ...
- Java IO管道流
import java.io.IOException; import java.io.PipedInputStream; import java.io.PipedOutputStream; publi ...