分页，在实习期间参与的项目中基本都会用到，除此之外还有移动端点击加载更多之类的（以后总结）。
分页使用场景
这个功能的实现，我借助了一个插件yqPaginator.js。
相关文件我会放到文章末尾。
如何使用此插件：
- 引入yqPaginator.js 与 yqPaginator.css 文件
- 在需要添加分页器的地方加入该元素
<div id="pagination" onselectstart="return false" style="text-align: right;"></div>（onselectstart="return false"是为了防止鼠标点击时选中文字，style="text-align: right;" 是使分页器右对齐布局） - 初始化分页器：
var paginationOne = new YqPaginator ( '#pagination' , {
total : Math.ceil ( totalCount / size ) , //总页数
current : 1 , //默认选中页码
onChange : function ( page ) {
//点击页码，page发生改变时，执行操作
},
isInputVisible:false //是否显示页码输入框
});
- 根据需求可以更改页码的样式，插件默认是正方形，在浏览器中F12调试中，可以查看不同元素的样式设置，找到对应的选择器，在yqPaginator.css修改其样式
- 如何实现点击页码加载不同数据：（这里要注意一个问题，即分页器的初始化和非初始化，只有第一次加载数据时，才会初始化创建一个分页器，当再点击第二页，再次发起请求获取数据时，就不需要再创建一个新的分页器了。我用了一个isInit参数进行控制，具体查看实例代码）
function getInfo ( page , size , isInit ) { //参数：页码、一页加载几条数据、是否初始化分页器
$.ajax({
type : 'GET',
url : '/api/article/getbypid?id=8&page='+page+'&pagesize='+size , //后台提供的接口，需要我提供当前模块的id（如“全部活动”模块的id为8），页码，每一页的条数
dataType : 'json',
success : function ( result ) {
var data = result.data,
articleArr = data.articles, //文章组成的数组
slot = '', //插槽字符串
title = '', //文章标题
time = '', //文章时间
articleId = 0, //文章ID
totalCount = data.Total; // 文章总数
if( articleArr.length > 0){
for (var i = 0 ; i < articleArr.length; i++ ) {
title = articleArr[i].title;
if ( articleArr[i].createTime != null ) {
time = formatDate( articleArr[i].createTime ); //这是一个时间戳转2018-11-6格式时间的方法，以后再写
}
articleId = articleArr[i].articleid;
slot += '<a href="article-read.jsp?articleId='+articleId+ '" target="_blank" title="'+title+'"><span>■</span>'+title+'<span class="fr">'+time+'</span></a>'; //将要渲染的页面元素用字符串拼接起来
}
$( '.allActivities' ).html( slot ); //将上面拼接的字符串直接插入到其容器中（css提前设置好样式哦）
//如果是初始化，则添加分页空控件
if ( isInit ) { //只有isInit判定为真，才能执行下面代码
if ( Math.ceil ( totalCount / size ) <= 1) { //总条数 / 每页条数 = 总页数，如果总页数都小于等于1，则不需要分页~
$('#pagination').remove(); //将之移除就好啦
} else {
var paginationOne = new YqPaginator( '#paginationTwo' , {
total : Math.ceil ( totalCount / size ) ,
current : 1 ,
onChange : function ( page ) {
getInfo ( page , 10，0 ) //调用自身，参数：page为当前点击的页码，10为每页10条数据， 0 即为非初始化！
},
isInputVisible:false
});
}
}
}
}
})
}
getInfo(1,10,1) //调用，参数：1为初始页码，10为每页10条数据， 1 为初始化分页！
分页功能的实现，还是要看后端提供的接口需要哪些参数来决定哦~
由于此插件是同时发给我的，我在网上没有搜到，那。。。。就把源代码摆在这里吧，以防此后文件丢失hia~ hia~ hia~~~
yqPaginator.js
'use strict';
(function() {
var YqPaginator = function YqPaginator(container, params) {
var defaults = {
current: 1,
total: 0,
onChange: null,
container: $(container),
isInputVisible: true
};
this.params = $.extend({}, defaults, params);
if (this.params.container.length > 1) {
this.params.container = this.params.container.eq(0);
}
this.init();
};
YqPaginator.prototype = {
init: function init() {
this.render();
this.bind();
},
render: function render() {
var total = this.params.total,
current = this.params.current;
if (!this.isNumber(total) || !this.isNumber(current)) {
throw new Error('[YqPaginator] total/current should be a number');
}
if (total <= 0 || current <= 0) {
throw new Error('[YqPaginator] total and current should greater than zero');
}
if (current > total) {
throw new Error('[YqPaginator] current could not greater than total');
}
var insert = '',
oWrap = $('<div class="yqPaginator-wrap"></div>'),
oUl = $('<ul class="yqPaginator-ul"></ul>'),
i = 0;
if (total < 8) {
if (total == 1) {
insert += '<li data-page="1">1</li>';
} else {
insert += '<li class="yqPaginator-prev"><</li>';
for (i = 1; i <= total; i++) {
insert += '<li data-page="' + i + '" class="yqPaginator-page">' + i + '</li>';
}
insert += '<li class="yqPaginator-next">></li>';
}
} else {
insert += '<li class="yqPaginator-prev"><</li><li class="yqPaginator-first yqPaginator-page" data-page="1">1</li><li class="yqPaginator-dots" is-visible="1">...</li>';
var iVal = 0;
if (current > 4 && current < total - 3) {
iVal = current - 2;
} else {
if (current <= 4) {
iVal = 2;
} else if (current >= total - 3) {
iVal = total - 5;
}
}
for (i = iVal; i < iVal + 5; i++) {
insert += '<li class="yqPaginator-page" data-page="' + i + '">' + i + '</li>';
}
insert += '<li class="yqPaginator-dots" is-visible="1">...</li><li class="yqPaginator-last yqPaginator-page" data-page="' + total + '">' + total + '</li><li class="yqPaginator-next">></li>';
}
oUl.append(insert);
if (total >= 8) {
if (current <= 4) {
oUl.find('.yqPaginator-dots').eq(0).hide().attr('is-visible', '0');
} else if (current >= total - 3) {
oUl.find('.yqPaginator-dots').eq(1).hide().attr('is-visible', '0');;
}
}
oUl.find('.yqPaginator-page[data-page="' + current + '"]').addClass('yqPaginator-current');
oUl.appendTo(oWrap);
if (total >= 8 && this.params.isInputVisible) {
var oInputWrap = $('<div class="yqPaginator-inputWrap"><span>共 ' + total + '页，到第</span><input type="text" class="yqPaginator-input"/><span>页</span><button class="yqPaginator-btn">确定</button></div>');
oInputWrap.appendTo(oWrap);
}
oWrap.appendTo(this.params.container);
},
isNumber: function isNumber(val) {
return !isNaN(parseInt(val));
},
bind: function bind() {
var container = this.params.container,
_this = this;
container.find('.yqPaginator-prev').on("click", function() {
if (_this.params.current == 1) return;
_this.params.current--;
_this.switchPage();
});
container.find('.yqPaginator-next').on("click", function() {
if (_this.params.current == _this.params.total) return;
_this.params.current++;
_this.switchPage();
});
container.find('.yqPaginator-page').on("click", function() {
_this.params.current = parseInt($(this).text());
_this.switchPage();
});
if (this.params.total >= 8 && this.params.isInputVisible) {
container.find('.yqPaginator-btn').on("click", function() {
var oVal = parseInt($(this).siblings('.yqPaginator-input').val());
if (_this.isNumber(oVal) && oVal <= _this.params.total) {
_this.params.current = oVal;
_this.switchPage();
}
});
container.find('.yqPaginator-input').on("keydown", function(event) {
var ev = event || window.event;
if (ev.keyCode == 13) {
var oVal = parseInt($(this).val());
if (_this.isNumber(oVal) && oVal <= _this.params.total) {
_this.params.current = oVal;
_this.switchPage();
}
}
});
}
},
switchPage: function switchPage() {
var current = this.params.current,
total = this.params.total,
container = this.params.container,
oUl = container.find('.yqPaginator-ul'),
oPageList = oUl.find('.yqPaginator-page');
if (total >= 8) {
var oDotList = oUl.find('.yqPaginator-dots'),
i = 0,
j = 0;
if (current > 4 && current < total - 3) {
for (i = 0; i < oDotList.length; i++) {
if (parseInt(oDotList.eq(i).attr('is-visible')) == 0) {
oDotList.eq(i).css('display', 'inline-block').attr('is-visible', '1');
}
}
j = current - 2;
} else {
if (current <= 4) {
if (parseInt(oDotList.eq(0).attr('is-visible')) == 1) {
oDotList.eq(0).hide().attr('is-visible', '0');
}
if (parseInt(oDotList.eq(1).attr('is-visible')) == 0) {
oDotList.eq(1).css('display', 'inline-block').attr('is-visible', '1');
}
j = 2;
} else if (current >= total - 3) {
if (parseInt(oDotList.eq(1).attr('is-visible')) == 1) {
oDotList.eq(1).hide().attr('is-visible', '0');
}
if (parseInt(oDotList.eq(0).attr('is-visible')) == 0) {
oDotList.eq(0).css('display', 'inline-block').attr('is-visible', '1');
}
j = total - 5;
}
}
for (i = 1; i < 6; i++, j++) {
oPageList.eq(i).text(j).attr('data-page', j);
}
}
oPageList.removeClass('yqPaginator-current');
oPageList.filter('[data-page="' + current + '"]').addClass('yqPaginator-current');
if (this.params.onChange) {
this.params.onChange(current);
}
}
};
window.YqPaginator = YqPaginator;
})();
YqPaginator.css
.yqPaginator-wrap *{
box-sizing: border-box;
}
.yqPaginator-ul{
display: inline-block;
vertical-align: middle;
height: 40px;
overflow-y: hidden;
}
.yqPaginator-ul li{
display: inline-block;
box-sizing: border-box;
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
color: #666;
border:1px solid #e6e6e6;
cursor: pointer;
margin-left: -1px;
font-size: 14px;
}
.yqPaginator-ul .yqPaginator-dots{
color: #999;
border: none;
}
.yqPaginator-ul .yqPaginator-current{
background: #1E3B4B;
color: #fff;
border:1px solid #1E3B4B;
}
.yqPaginator-inputWrap{
display: inline-block;
vertical-align: middle;
color: #999;
font-size: 12px;
line-height: 20px;
margin-left: 10px;
}
.yqPaginator-input{
width: 30px;
margin: 0 3px;
line-height: 20px;
height: 18px;
padding: 0;
border:1px solid #e6e6e6;
outline: none;
}
.yqPaginator-btn{
background: none;
border:1px solid #e6e6e6;
color: #666;
margin-left: 10px;
}
