您的位置：首页 > Web前端 > JQuery

使用jquery插件kkpager为页面添加分页

2016-04-26 14:52 477 查看

首先下载kkpager插件：https://github.com/pgkk/kkpager
1、将下载下来的js和css拷贝到项目中，在需要分页的页面引入kkpager插件所需的js和css,如下：

<script type="text/javascript" src="js/kkpager.js"></script>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<link rel="stylesheet" type="text/css" href="css/kkpager_orange.css">

其中css有两个，一个是橘色的，一个是蓝色的，选择喜欢的颜色任意引入一个就可以。
2、在需要分页的页面添加div：

<div id="kkpager"></div>

3、因为使用时这个插件初始化页面时代码挺多，所以我就新建了一个js文件，并在其中封装了一个初始化的方法。
新建common.js(记得将这个js引入到要分页的页面哦),定义方法initPage;

/**
* 生成分页控件
nowPage:当前页
totalPage:总页数
totalRows：总记录条数
rows:每页显示多少条
fun：要调用的函数  一般写填充表格数据的逻辑
*/
function initPage(nowPage,totalPage,totalRows,rows,fun){
//生成分页控件
kkpager.generPageHtml({
pno : nowPage,
mode : 'click', //设置为click模式
//总页码
total : totalPage,
//总数据条数
totalRecords : totalRows,
//点击页码、页码输入框跳转、以及首页、下一页等按钮都会调用click
//适用于不刷新页面，比如ajax
click : function(n){
//这里可以做自已的处理
//...
//点击要调用的函数 参数1 当前页数  参数2 每页显示的条数
fun(n,rows);
//处理完后可以手动条用selectPage进行页码选中切换
this.selectPage(n);
},
//getHref是在click模式下链接算法，一般不需要配置，默认代码如下
getHref : function(n){
return '#';
}
});
}

这样基本就搞定了。
4、在需要分页的的页面使用，其实现在只要直接调用comom.js中定义好的方法即可。

<script type="text/javascript">
//自定义方法，获取数据并加载
/*
nowPage:当前页
rows：每页显示的数据条数
*/
function loadInfor(nowPage,rows){
//TODO（例：发送ajax请求，从后台获取数据，构建动态表格之类的……）
//其中的10 和100 可以是从后台获取的真实数据
//loadInfor是当前这个函数，作为参数传入是为了initPage中的click点击事件
initPage(nowPage,10,100,rows,loadInfor);
}
$(function(){
//kkpager.pno :插件提供的方法，获取当前页码
loadInfor(kkpager.pno,10);
});

</script>
</head>
<body>
<div id="kkpager"></div>
</body>

页面效果：

如果有真实的数据，效果就更鲜明了，完毕！
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
额外的：PageUtil.java,后台封装页面所需的分页数据，一并奉上！

public class PageUtil  implements java.io.Serializable{
/**
* serialVersionUID
*/
private static final long serialVersionUID = 1L;
// 当前页
private Integer page;
// 每页多少条
private Integer rows;
// 总页数
private Integer totalPage;
// 总记录条数
private Integer totalRows;

public Integer getPage() {
return page;
}

public void setPage(Integer page) {
this.page = page;
}

public Integer getRows() {
if(rows==null){
rows=10;
}
return rows;
}

public void setRows(Integer rows) {
this.rows = rows;
}

public Integer getTotalPage() {
if(totalRows==null){
totalRows=0;
}
if (totalRows % getRows() == 0) {
totalPage = totalRows / getRows();
} else {
totalPage = totalRows / getRows() + 1;
}
return totalPage;
}

public void setTotalPage(Integer totalPage) {
this.totalPage = totalPage;
}

public Integer getTotalRows() {
return totalRows;
}

public void setTotalRows(Integer totalRows) {
this.totalRows = totalRows;
}

public PageUtil(Integer page, Integer rows, Integer totalPage,
Integer totalRows) {
super();
this.page = page;
this.rows = rows;
this.totalPage = totalPage;
this.totalRows = totalRows;
}

public PageUtil() {
super();
}

@Override
public String toString() {
return "PageUtil [page=" + page + ", rows=" + rows + "]";
}

}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 分页分页插件 kkpager

相关文章推荐

新的分享

章节导航