使用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.
官网：http://paginationjs.com/
该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 + "/";
%>
">
技术无止境
时间
每日分享
每日笑话
每日音乐
${item.share.dateId}
${item.share.detail}
${item.joke.detail}
${item.music.name} - ${item.music.singer}
每页显示：${max}条
20
30
50
100