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
<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" /><div id="kkpager"></div><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 参数需要按需要重写。
<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;
}