一： link模式 （设置a标签链接地址,跟不同参数：<a href="xxxx.html?current=3">3</a>;current:当前页码）
二：click模式 (自定义函数跳转，ajax方式，通过点击事件发送ajax请求获取数据。ajax分页)
===================================================================================
<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" />
<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;
}
具体实现示例
var result = queryProductList(1);// 发送请求
//数据总条数
var totalCount = result['totalCount'];
var totalPageCount = result['totalPageCount'];// 总页数
var pageSize = result['pageSize'];//每页显示个数
var pageNo = result['pageNo'];//当前第几页
setList(result['result']);//填充数据
//分页控件
kkpager.generPageHtml({
//设置为click模式
mode : 'click',
pno : pageNo,
//总页码
total : totalPageCount,
//总数据条数
totalRecords : totalCount,
//点击页码、页码输入框跳转、以及首页、下一页等按钮都会调用click
//适用于不刷新页面，比如ajax
//点击页码的函数，这里发送ajax请求后台
click:function(n){
//根据电机的页码 发送请求
var result = queryProductList(n);
//填充数据
setList(result['result']);
this.selectPage(n); //手动条用selectPage进行页码选中切换
},
//getHref是在click模式下链接算法，一般不需要配置，默认代码如下
getHref : function(n){
return '#';
}
});
//发送请求
function queryProductList(pageNo)
{
var params = {};
params['pageNo'] = pageNo;
params['pageSize'] = 4;
var result = jQuery.parseJSON(jQuery.ajax({
async: false,
url: basePath + 'web/productListSearch!getAllProductList.json',
data: params,
type: 'POST',
dataType: 'json'
}).responseText)['result'];
return result;
}
//填充商品数据信息
function setList(listData) {
var listItem = $('.all-list');
listItem.empty();
var tmpl = '<li>'+
<!-- 未能成功加载时的替代图片 -->
' <span class="img-no"></span>' +
<!-- 产品图 -->
' <div class="pic">' +
' <a href=""><img src="${basePath}/download.stream?filePath={FILEPATH}" height="210" width="210" alt="" /></a>' +
' </div>' +
<!-- 价格 -->
' <div class="price">' +
' <span>¥<strong>{PRICE}</strong></span>' +
' </div>' +
<!-- 产品名 -->
' <div class="name-a">' +
' <a href="">{NAME}</a>' +
' </div>' +
' <div class="name-b">' +
' <a href="">此款大部分虾腹部含饱满</a>' +
' </div>' +
<!-- 产品评价 -->
' <div class="comment">' +
' <a href="">已有3456评价</a>' +
' </div>' +
<!-- 加入购物车 行动-->
' <div class="action">' +
' <div class="p-num">' +
' <span>' +
' <input type="text"class="numbers" value="1" />' +
' </span>' +
' <span>' +
' <a href="" class="p-add">+</a>' +
' <a href="" class="p-reduce disable">-</a>' +
' </span>' +
' </div>' +
' <div class="p-btn"><a href="">进入购物车</a></div>' +
' <div class="prompt">' +
' <a href="" class="select">销</a>' +
' <a href="">新</a>' +
' <a href="">推</a>' +
' </div>' +
'</div>' +
'</li>';
for (var i = 0, ilen = listData.length; i < ilen; i++) {
var d = {
UUID : listData[i]['UUID'],
NAME : listData[i]['NAME'],
PRICE : listData[i]['PRICE'],
FILEPATH : listData[i]['FILEPATH']
};
listItem.append(nano(tmpl, d));
}
}
});
109
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
