kkpager v1.2
js分页展示控件,传入简单参数就能使用的分页效果控件
在线测试链接:http://pgkk.github.io/kkpager/example/pager_test.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.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
isShowTotalRecords
是否显示总记录数布尔型
默认值 true
isShowFirstPageBtn
是否显示首页按钮布尔型
默认值 true
isShowLastPageBtn
是否显示尾页按钮布尔型
默认值 true
isShowPrePageBtn
是否显示上一页按钮布尔型
默认值 true
isShowNextPageBtn
是否显示下一页按钮布尔型
默认值 true
isGoPage
是否显示页码跳转输入框布尔型
默认值 true
hrefFormer
链接前部字符串
默认值 ''
hrefLatter
链接尾部字符串
默认值 ''
lang
语言配置对象,属性配置列表:
firstPageText
首页按钮文本字符串
默认值 '首页'
firstPageTipText
首页按钮提示文本字符串
默认值 '首页'
lastPageText
尾页按钮文本字符串
默认值 '尾页'
lastPageTipText
尾页按钮提示文本字符串
默认值 '尾页'
prePageText
上一页按钮文本字符串
默认值 '上一页'
prePageTipText
上一页按钮提示文本字符串
默认值 '上一页'
nextPageText
下一页按钮文本字符串
默认值 '下一页'
nextPageTipText
下一页提示按钮文本字符串
默认值 '下一页'
totalPageBeforeText
总页数前缀文本字符串
默认值 '共'
totalPageAfterText
总页数后缀文本字符串
默认值 '页'
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;
}
相关推荐
这是一个适配所有浏览器的js分页插件,我一直在用,简单方便轻量,重点是适配所有浏览器,适配所有浏览器,适配所有浏览器
vue分页插件_vue.js分页插件下载
移动端H5-dropload.js分页插件 https://blog.csdn.net/qq_36993916/article/details/113742945
比较基础的JS分页,基于jQuery的插件,写的不好,还望见谅。。
jquery 分页插件,代码少,兼容性好, 兼容ie5,ie6。
基于vue2.0分页插件,vue.js分页插件下载源码 一、vue分页插件浏览器适配: 1.支持Chrome所有版本 2.支持Firefox所有版本 3.支持Safari所有版本 4.支持IE11及以上版本 二、vue分页插件使用教程 import pageination ...
这是一个原生JavaScript分页插件,它不依赖于任何js库即可直接使用
jQuery.jpage.js分页插件制作分页列表切换动画效果代码
js分页插件,自己下载然后适当修改源码,小巧,2k,3个文件
自己写的一个js分页控件.已经封装,可以直接使用. 适合各种用途的分页控制. 如果界面不够美观,只需要修改css即可.
支持页码跳转
原生js分页插件特效.zip 原生js分页插件特效.zip 原生js分页插件特效.zip
分页插件分页插件分页插件JAVA JSP 简单分页插件JAVA JSP 简单分页插件JAVA JSP 简单分页插件JAVA JSP 简单分页插件JAVA JSP 简单分页插件JAVA JSP 简单分页插件JAVA JSP 简单分页插件JAVA JSP 简单分页插件JAVA JSP...
插件描述:基于jQuery的分页插件,配置比较详细。 参考实例:http://www.jq22.com/jquery-info5697
织梦首页分页插件
http://blog.csdn.net/xyl_ice/article/details/70808952
06实现mybatis分页插件demo06实现mybatis分页插件demo06实现mybatis分页插件demo06实现mybatis分页插件demo06实现mybatis分页插件demo06实现mybatis分页插件demo06实现mybatis分页插件demo06实现mybatis分页插件demo...
javaee-SpringMVC-Mybatis 分页插件
一个好用的js分页插件,能够较快地实现分页功能。资源中包括,css,js 样例等