使用Pagination.js进行前台页面的分页处理
勾炜
本文原地址来自于我的个人博客：www.endless365.com,希望得到各位的关注。
本文详细地址出自于：http://www.endless365.com/article/get?type=tec&id=140
今天在对本博客每日分享tab下面的分页做了一定的改进，本来使用的自己通过bootstrap手动处理的逻辑，由于发现了这个插件，就打算使用这个插件并改进代码，让该页面变的更加简单。
Pagination.js
解释：A jQuery plugin to provide simple yet fully customisable pagination.Almost all the ways you can think of on pagination.
该js文档非常清晰，Demo也非常简单明了，所以很容易就可以通过文档构建出高自定义的分页
现在给出几个官网上简单的列子，如下：
Normal:
$('#demo').pagination({
dataSource: [1, 2, 3, 4, 5, 6, 7, ... , 195],
callback: function(data, pagination){
// template method of yourself
var html = template(data);
dataContainer.html(html);
}
})
Show "go" input & button:
$('#demo').pagination({
dataSource: [1, 2, 3, 4, 5, 6, 7, ... , 40],
pageSize: 5,
showGoInput: true,
showGoButton: true,
callback: function(data, pagination){
// template method of yourself
var html = template(data);
dataContainer.html(html);
}
})
是不是非常的简单，在这里就不写太多，官网首页有更多的列子和结果展示。
由于官网上文档非常的详细，所以我只解释几个我自己认为比较重要的点。
1、Methods
作者定义了很多方法用来实现一些功能，比如
previous、next、go、disable、enable、show、hide、destroy、getSelectedPageNum、getTotalPage、getSelectedPageData、isDisabled.
前一页触发：container.pagination('previous');
go跳转：1. container.pagination('go', 8)
2. container.pagination(8)
3. container.pagination('go', 8, function(data, pagination){ // template method of yourself})
获取当前选中的页面：container.pagination('getSelectedPageNum')2、事件
作者定义了很多事件用来解决不同需求的方案，具体有哪些事件可以参考官网。
在这里我给出了一个我使用Pagination.js创建的分页，并实现我的需求
$(function () {
createPagination();
});
var container = $('#pagination');
function createPagination() {
var sources = function () {
var result = [];
for (var i = 1; i < $("#shareNums").val(); i++) {
result.push(i);
}
return result;
}();
var options = {
dataSource: sources,
pageNumber:$("#pageNum").val(),
showGoInput: true,
showGoButton: true,
callback: function (response, pagination) {
window.console && console.log(response, pagination);
},
//输入页面点击跳转触发的事件
afterGoButtonOnClick: function () {
window.console && console.log(pagination);
getPageData();
},
//点击上一页触发的事件
afterPreviousOnClick: function () {
getPageData();
},
//点击下一页触发的事件
afterNextOnClick: function () {
getPageData();
},
//点击某一具体页触发的事件
afterPageOnClick: function () {
getPageData();
}};
container.pagination(options);
return container;
}
//用来设置每页显示多少数据
function setNum(obj) {
var initPage = $(obj).html();
$("#num").text(initPage);
location.href = "share/pageShares?pageNum=0&max=" + initPage;
}
//通过springmvc从后台获取数据并跳转项
function getPageData() {
var pageNum = container.pagination('getSelectedPageNum');
var max = $("#num").text();
location.href = "share/pageShares?pageNum=" + pageNum + "&max="+max;
}以下是本博客每日分享的页面代码：
<%--
Document : template
Created on : 2015-11-5, 10:33:27
Author : sunny
--%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<base href="<%=basePath%>">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>技术无止境</title>
<!--<link rel="stylesheet" href="bootstrap.min.css">-->
<link rel="stylesheet" href="css/endless.css">
<link rel="stylesheet" href="css/pagination.css">
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
<script src="js/jquery-2.1.3.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/endless.js"></script>
</head>
<jsp:include page="../header.jsp"></jsp:include>
<body>
<input type="hidden" id="shareNums" value="${shareNums}" />
<input type="hidden" id="max" value="${max}" />
<input type="hidden" id="pageNum" value="${pageNum}" />
<div class="container-fluid">
<br>
<table class="table table-striped table-responsive">
<thead>
<tr class="info">
<th width="10%">时间</th>
<th width="35%">每日分享</th>
<th width="35%">每日笑话</th>
<th width="20%">每日音乐</th>
</tr>
</thead>
<tbody id="shareBody">
<c:forEach var="item" items="${shares}">
<tr>
<td width="10%" class='success'>${item.share.dateId}</td>
<td width="35%">${item.share.detail}</td>
<td width="35%">${item.joke.detail}</td>
<td width="20%">${item.music.name} - ${item.music.singer}</td>
</tr>
</c:forEach>
</tbody>
</table>
<div class="row">
<div class="col-md-2 col-md-offset-6">
<div class="dropdown">
<button class="btn btn-success" type="button" id="showPageNum" data-toggle="dropdown">
每页显示：<strong id="num">${max}</strong>条
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="showPageNum">
<li role="presentation"><a role="menuitem" tabindex="1" οnclick="setNum(this)">20</a></li>
<li role="presentation"><a role="menuitem" tabindex="2" οnclick="setNum(this)">30</a></li>
<li role="presentation"><a role="menuitem" tabindex="3" οnclick="setNum(this)">50</a></li>
<li role="presentation"><a role="menuitem" tabindex="4" οnclick="setNum(this)">100</a></li>
</ul>
</div>
</div>
<div class="col-md-4">
<div id="pagination"></div>
</div>
</div>
</div>
<br>
<script src="./js/bootstrap-datepicker.min.js"></script>
<!-- UJian Button BEGIN -->
<script type="text/javascript" src="http://v1.ujian.cc/code/ujian.js?type=slide&fade=1&uid=2042061"></script>
<script src="js/pagination.min.js"></script>
<script type="text/javascript">
$(function () {
createPagination();
});
var container = $('#pagination');
function createPagination() {
var sources = function () {
var result = [];
for (var i = 1; i < $("#shareNums").val(); i++) {
result.push(i);
}
return result;
}();
var options = {
dataSource: sources,
pageNumber:$("#pageNum").val(),
showGoInput: true,
showGoButton: true,
callback: function (response, pagination) {
window.console && console.log(response, pagination);
},
afterGoButtonOnClick: function () {
window.console && console.log(pagination);
getPageData();
},
afterPreviousOnClick: function () {
getPageData();
},
afterNextOnClick: function () {
getPageData();
},
afterPageOnClick: function () {
getPageData();
}
};
container.pagination(options);
return container;
}
function setNum(obj) {
var initPage = $(obj).html();
$("#num").text(initPage);
location.href = "share/pageShares?pageNum=0&max=" + initPage;
}
function getPageData() {
var pageNum = container.pagination('getSelectedPageNum');
var max = $("#num").text();
location.href = "share/pageShares?pageNum=" + pageNum + "&max="+max;
}
</script>
<a href="http://www.ujian.cc" style="border:0;"><img src="http://img.ujian.cc/pixel.png" alt="友荐云推荐" style="border:0;padding:0;margin:0;" /></a>
<!-- UJian Button END -->
<jsp:include page="../footer.jsp"></jsp:include>
</body>
</html>
类似资料：