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 ...
随机推荐
- CSP-J总结&题解
总结: 这一次,最后一次,还是不行啊. 文件操作方面:没有FCLOSE,血的教训. 考场复盘: 首先一二题没什么好讲的,秒切.但是第三题由于一开始看出来是完全背包,但是好像又不是,去年又有摆渡车阴影, ...
- 转发大神nginx配置详解
序言 Nginx是lgor Sysoev为俄罗斯访问量第二的rambler.ru站点设计开发的.从2004年发布至今,凭借开源的力量,已经接近成熟与完善. Nginx功能丰富,可作为HTTP服务器,也 ...
- Poj 2018 Best Cow Fences(分数规划+DP&&斜率优化)
Best Cow Fences Time Limit: 1000MS Memory Limit: 30000K Description Farmer John's farm consists of a ...
- Pytest权威教程21-API参考-07-配置选项(Configuration Options)
目录 配置选项(Configuration Options) addopts cache_dir confcutdir console_output_style doctest_encoding do ...
- Leetcode Majority Element系列 摩尔投票法
先看一题,洛谷2397: 题目背景 自动上次redbag用加法好好的刁难过了yyy同学以后,yyy十分愤怒.他还击给了redbag一题,但是这题他惊讶的发现自己居然也不会,所以只好找你 题目描述 [h ...
- 模板 - 字符串/数据结构 - 字典树/Trie
使用静态数组的nxt指针的设计,大概比使用map作为nxt指针的设计要快1倍,但空间花费大概也大1倍.在数据量小的情况下,时间和空间效率都不及map<vector,int>.map< ...
- Tkinter 之事件绑定
import tkinter as tk window = tk.Tk() # 设置窗口大小 winWidth = 600 winHeight = 400 # 获取屏幕分辨率 screenWidth ...
- js中array.some()的用法
let array=[ { name:'jack', age:'19' }, { name:'rose', age:'19' } ] var box=array.some((value,index)= ...
- JS中的constructor 和 prototype
object.constructor :对象的constructor 属性引用了该对象的构造函数. //例如,用Array()构造函数创建了一个数组,那么a.constructor 引用的就是Arra ...
- 数据结构Java版之堆&堆排序(九)
堆分为大顶堆,和小顶堆. 什么是堆? 堆可以看成是一棵二叉树,二叉树的元素是一个数组不断的从左到右轮训放置.如果是大顶堆,则大的数放上面一层,小的数放下面一层.上一层的数,一定大于下一层的数.小顶堆则 ...