在这里,得着重说一下:
1.初始化分页插件时,是数字类型的参数最好不要用字符串来表示,不然渲染可能会有问题.
2.使用setPage方法时,必须注意传入的参数是数字类型,而不是字符串类型,如果是字符串类型,请使用parseInt()转化下.
3.当前插件适合与ajax结合使用或者是静态分页,不建议url刷新分页,初衷设计就是为了前后端分离.
4.如果真的需要url刷新分页,那么也是可以的,每次刷新分页后,先初始化插件并且不去设置总页数参数,然后在使用setPage方法即可.
5.插件初始化的时候没有开放当前页参数,默认为1.
6.插件兼容原生IE8,但jq库得支持IE8才行.
使用ajax分页例子,默认每页5条(建议初始化分页插件参数isResetPage设为true):
function loadData(currPage, pageSize) {
$.ajax({
//其它参数选项请自填
success: function(res) {
//处理数据
//设置分页插件显示
$("#pagination").whjPaging("setPage", {currPage: res.currPage, totalPage: res.totalPage, totalSize: res.totalSize});
}
});
}
$("#pagination").whjPaging({
//设为true时,ajax里的success函数必须调用setPage方法,否则分页插件显示保持不变
isResetPage: true,
callBack: function(currPage, pageSize) {
loadData(currPage, pageSize);
}
});
loadData(1, 5);
使用静态数据分页例子,默认每页5条(建议初始化分页插件参数isResetPage设为false,默认false):
function loadData(currPage, pageSize) {
//处理数据
}
$("#pagination").whjPaging({
//静态数据已知的总条数
totalSize: 90,
//静态数据已知的总页数
totalPage: 18,
callBack: function(currPage, pageSize) {
loadData(currPage, pageSize);
}
});
loadData(1, 5);
初始化分页插件参数:
var options = {
//可选,css设置,可设置值:css-1,css-2,css-3,css-4,css-5,默认css-1,可自定义样式
css: 'css-1',
//可选,每页条数下拉框,5条/页(默认)、10条/页、15条/页、20条/页
pageSizeOpt: [
{value: 5, text: '5条/页', selected: true},
{value: 10, text: '10条/页'},
{value: 15, text: '15条/页'},
{value: 20, text: '20条/页'}
],
//可选,总条数
totalSize: 90,
//可选,总页数
totalPage: 18,
//可选,展示页码数量,默认5个页码数量
showPageNum: 5,
//可选,首页按钮展示文本,默认显示文本为首页
firstPage: "首页",
//可选,上一页按钮展示文本,默认显示文本为上一页
previousPage: "上一页",
//可选,下一页按钮展示文本,默认显示文本为下一页
nextPage: "下一页",
//可选,尾页按钮展示文本,默认显示文本为尾页
lastPage: "尾页",
//可选,跳至展示文本,默认显示文本为跳至
skip: "跳至",
//可选,确认按钮展示文本,默认显示文本为确认
confirm: "确认",
//可选,刷新按钮展示文本,默认显示文本为刷新
refresh: "刷新",
//可选,共{}页展示文本,默认显示文本为共{}页,其中{}会在js具体转化为数字
totalPageText: "共{}页",
//可选,共{}条记录展示文本,默认显示文本为共{}条记录,其中{}会在js具体转化为数字
totalSizeText: "共{}条记录",
//可选,是否展示首页与尾页,默认true
isShowFL: true,
//可选,是否展示每页条数下拉框,默认true,如果设置显示,总条数必须设置
isShowPageSizeOpt: true,
//可选,是否展示跳到指定页数,默认true
isShowSkip: true,
//可选,是否展示刷新,默认true
isShowRefresh: true,
//可选,是否展示共{}页,默认true
isShowTotalPage: true,
//可选,是否展示共{}条记录,默认true
isShowTotalSize: true,
//可选,是否需要重新设置当前页码、总页数及总条数,默认false,如果设为true,那么在请求服务器返回数据时,需要调用setPage方法
isResetPage: false,
//必选,回掉函数,返回参数:第一个参数为页码,第二个参数为每页显示N条
callBack: function (currPage, pageSize) {
console.log('currPage:' + currPage + ' pageSize:' + pageSize);
}
};
setPage | getPage方法:
//setPage方法
$("#pagination").whjPaging("setPage", {currPage: 当前页码, totalPage: 总页数, totalSize: 总条数});
//getPage方法,返回一个对象 {totalSize: 总条数, currPage: 当前页码, pageSize: 每页显示条数, totalPage: 总页数}
$("#pagination").whjPaging("getPage");
总页数为零时,不显示分页插件,可自定义显示文字及css
当请求服务器返回数据时,需要重新设置当前页码、总页数及总条数
获取当前页码、总页数、总条数及每页显示条数,请用控制台查看