jQuery控件之分页控件-- kkpager v1.3使用简介
js分页展示控件,传入简单参数就能使用的分页效果控件
在线测试链接:
http://pgkk.github.io/kkpager/example/pager_test.html
http://pgkk.github.io/kkpager/example/pager_test_orange_color.html
http://pgkk.github.io/kkpager/example/pager_test_clickmode.html
准备工作,引入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 v1.3使用简介的更多相关文章
- 基于jquery扩展漂亮的分页控件(ajax)
分页控件式大家在熟悉不过的控件,很多情况下都需要使用到分页控件来完成列表数据加载操作,在很多分页控件中有的编写麻烦,有的应用扩展比较复杂,有的分页控件样式比较丑陋,有的分页控件用户体验操作比较简单等等 ...
- jQuery Pagination Plugin ajax分页控件
<html> <body> <div id="datagrid"> </div> <div id="paginati ...
- 基于avalon+jquery做的bootstrap分页控件
刚开始学习avalon,项目需要就尝试写了个分页控件Pager.js:基于BootStrap样式这个大家都很熟悉 在这里推荐下国产前端神器avalon:确实好用,帮我解决了很多前端问题. 不多说了,代 ...
- Web用户控件开发--分页控件
分页是Web应用程序中最常用到的功能之一,在ASP.NET中,虽然自带了一些可以分页的数据控件,但其分页功能并不尽如人意.本文对于这些数据控件的假分页暂且不表,如有不明白的同学请百Google度之. ...
- DEV控件的分页控件,实现勾选复选框
/// <summary> /// 单元格的点击事件 /// </summary> /// <param name="sender"></ ...
- asp.net分页控件库
AspNetPager分页控件 AspNetPager分页控件解决了分页中的很多问题,直接采用该控件进行分页处理,会将繁琐的分页工作变得简单化,下面是我如何使用AspNetPager控件进行分页处理的 ...
- 【NET】Winform分页控件初探
public partial class WinFormPager : UserControl { ; /// <summary> /// 当前页 /// </summary> ...
- 《ASP.NET1200例》ListView 控件与DataPager控件的结合<一>
分页 在前一部分开始时介绍的原 HTML 设计中内含分页和排序,所以根据规范完整实现该网格的任务尚未完成.我们先分页,然后再排序. ListView 控件中的分页通过引入另一个新控件 Data ...
- ajax 分页控件,基于jquery
/* 分页插件,依赖jQuery库 version: 1.1.0 author: Harrison Cao release date: 2013-09-23 相对 v1.0版本 修正了分页居中 使用方 ...
随机推荐
- Nginx: ubuntu系统上如何判断是否安装了Nginx?
问题描述:ubuntu系统上,如何查看是否安装了Nginx? 解决方法:输入命令行:ps -ef | grep nginx master process后面就是Nginx的安装目录. 延伸:1. 如何 ...
- RSA与AES实现数据加密传输
RSA.AES简介 RSA:非对称加密,需要提前生成两个密钥(一对的),通过其中一个密钥加密后的数据,只有另一个密钥能解密.通常这两个密钥中有一个会暴漏出来,即对外公开的,这个密钥称为“公钥”,反之另 ...
- cols
题目描述 请设计一个函数,用来判断在一个矩阵中是否存在一条包含某字符串所有字符的路径.路径可以从矩阵中的任意一个格子开始,每一步可以在矩阵中向左,向右,向上,向下移动一个格子.如果一条路径经过了矩阵中 ...
- 水题:CF16C-Monitor
Monitor 题目描述 Reca company makes monitors, the most popular of their models is AB999 with the screen ...
- poj 1979 走多少个‘ . '问题 dfs算法
题意:给你一个迷宫地图,让你走.问最多可以走多少个“." 思路:dfs 找到起点,然后对起点进行dfs操作. dfs操作时,要把当前的位置标志成"#"表示已经走过,然后进 ...
- Linux学习-登录档的轮替(logrotate)
rsyslogd 利用的是 daemon 的方式来启动的, 当有需求的时候立刻就会被执行的,但是 logrotate 却是在规定的时间到了之后才来进行登录档的轮 替, 所以这个 logrotate 程 ...
- bash实例
1写一个脚本,完成如下功能(使用函数):1.脚本使用格式:mkscript.sh [-D|--description "script description"] [-A|--aut ...
- 配置LAMP环境
对我这种Linux小菜鸡来说,集成环境是最好的选择. 一,下载wget --no-check-certificate https://github.com/teddysun/lamp-yum/arch ...
- IOS开发之----全局变量extern的使用
extern,作用在IOS中,为了使用全局变量.比写在appDelegate和定义单例方便一些: 举例: 1.MyExternClass.h添加这个类,并在.m文件添加 代码 #import &quo ...
- selenium - 常用等待操作
# 4. 等待操作 # 强制等待from time import sleepsleep(10) # 隐性等待# 设置最长等待时间,在这个时间在只要有个时间点加载完成,则执行下一步代码,比sleep智能 ...