jquery分页展示控件 kkpager 使用

本demo将讲解两种方式：
一：link模式（设置a标签链接地址,跟不同参数：<a href="xxxx.html?current=3">3</a>;current:当前页码）
二：click模式 (自定义函数跳转，ajax方式，通过点击事件发送ajax请求获取数据。ajax分页)
===================================================================================

准备工作，引入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>

[b]后台Java代码，模拟查询数据库[/b]

后台使用struts2 和 json，不多说！

一：link模式

<script type="text/javascript">
var sum = '${sum}';//总数据条数后台返回数据
var totalPage = Math.ceil(sum/3);//总页数总数据条数/每页显示数 向上取整
var current = '${current}';//当前页数 后台返回数据
if(current == 0){
current = 1;
}
$(function(){
//初始化函数
kkpager.generPageHtml({
pno : current, //当前页数
total : totalPage,//总页数
totalRecords : sum, //总数据条数
mode:'link', //默认为link模式
getLink : function(n){
return 'usercontent/user.do?current='+n; //设置a标签href地址 n表示页码
},
//可选，有默认值
lang : {
firstPageText : '第一页',
lastPageText : '最后一页',
prePageText : '上一页',
nextPageText : '下一页',
totalPageBeforeText : '共',
totalPageAfterText : '页',
totalRecordsAfterText : '条数据',
gopageBeforeText : '转到',
gopageButtonOkText : '确定',
gopageAfterText : '页',
buttonTipBeforeText : '第',
buttonTipAfterText : '页'
}
});
});
</script>

[b]二：click模式 （ajax 局部刷新）[/b]

$(function(){
var sum = '${sum}';//总数据条数后台返回数据
var totalPage = Math.ceil(sum/3);//总页数总数据条数/每页显示数 向上取整
var current = '${current}';//当前页数      后台返回数据
if(current == 0){
current = 1;
}
//初始化函数
kkpager.generPageHtml({
pno : current, //当前页数
total : totalPage,//总页数
totalRecords : sum, //总数据条数
mode:'click', //这里设置为click模式
lang : {
firstPageText : '第一页',
lastPageText : '最后一页',
prePageText : '上一页',
nextPageText : '下一页',
totalPageBeforeText : '共',
totalPageAfterText : '页',
totalRecordsAfterText : '条数据',
gopageBeforeText : '转到',
gopageButtonOkText : '确定',
gopageAfterText : '页',
buttonTipBeforeText : '第',
buttonTipAfterText : '页'
},
//点击页码的函数，这里发送ajax请求后台
click:function(n){
$(".data-d table").html("");
html = "<tr><td>id</td><td>uname</td><td>age</td><td>upwd</td></tr>";
$.post("usercontent/ajax.do?current="+n,function(data){
$.each(data,function(i,obj){
html +="<tr><td>"+obj.id+"</td><td>"+obj.uname+"</td><td>"+obj.age+"</td><td>"+obj.upwd+"</td></tr>";
})
$(".data-d table").html(html);
},"json")
this.selectPage(n); //手动条用selectPage进行页码选中切换
},
//设置href链接地址,默认#
getHref:function(n){
return "javascript:;;";
}
});
});

参数配置说明：

必选参数

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

语言配置对象，属性配置列表（只能在lang:{xxx}这里配置）：

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）

函数类型