js 分页 (仅包含数据,使用vue生成界面)
Lenny-Hu opened this issue · 0 comments
Lenny-Hu commented
分页工具代码
/*
* @Description: In User Settings Edit
* @Author: your name
* @Date: 2019-08-28 13:01:38
* @LastEditTime: 2019-09-30 13:46:23
* @LastEditors: Please set LastEditors
*/
// 分页工具,仅返回页码数据,不包含html
;(function (global) {
var factory = function () {
function Pagination (options) {
var _options = options || {};
this.options = {
max: 5, // 最多显示的页码数量
size: 10, // 每页的数量
showPrevAndNext: true, // 显示上一页和下一页
showFirstAndLast: true, // 显示首页和尾页
showPageNumber: true, // 显示数字页码
nextText: '下一页', // 上下页文字
prevText: '上一页'
};
this.options = $.extend(this.options, _options);
this.res = []; // 页码结果数组
this.pageCount = 0; // 总页数
this.page = 1; // 当前页
this.count = 0; // 总数量
this.front = parseInt(this.options.max / 2); // 前面显示的页码
this.rear = this.options.max - this.front - 1; // 后面显示的页码
// 上一页和下一页结果数组
this.prevRes = [];
this.nextRes = [];
}
// 处理上一页和下一页
Pagination.prototype.prevAndNext = function () {
if (this.options.showPrevAndNext) {
if (this.page > 1) {
this.prevRes = [{
text: this.options.prevText,
index: this.page - 1
}];
}
if (this.pageCount > 1 && this.page != this.pageCount) {
this.nextRes = [{
text: this.options.nextText,
index: this.page + 1
}];
}
}
}
// 首页和尾页
Pagination.prototype.firstAndLast = function () {
if (this.options.showFirstAndLast) {
// 添加首页
if (this.page - this.front > 1) {
this.res.unshift({
text: 1,
index: 1
});
// 首页后面的...
if (this.page >= this.options.max) {
this.res.splice(1, 0,
{
text: '...',
index: this.page - this.front
}
);
}
}
// 添加尾页
var len = this.res.length;
if (this.page + this.rear < this.pageCount) {
this.res.push({
text: this.pageCount,
index: this.pageCount
});
// 尾页后面的...
if (this.page + this.rear + 1 != this.pageCount) {
this.res.splice(len, 0,
{
text: '...',
index: this.page + this.rear
}
);
}
}
}
}
// 中间的页码
Pagination.prototype.pageNumber = function () {
if (this.options.showPageNumber) {
var start = (this.page - this.front) <= 0 ? 1 : this.page - this.front;
var end = (this.page + this.rear) > this.pageCount ? this.pageCount : this.page + this.rear;
for (var index = start; index <= end; index++) {
this.res.push({
text: index,
index: index,
active: this.page == index
});
}
}
}
Pagination.prototype.create = function (page, count) {
this.res = [];
this.prevRes = [];
this.nextRes = [];
this.page = +page;
this.count = +count;
this.pageCount = Math.ceil(this.count / this.options.size); // 总页数
this.prevAndNext(); // 上一页和下一页
this.pageNumber(); // 中间的页码
this.firstAndLast(); // 首页和尾页
return [].concat(this.prevRes, this.res, this.nextRes);
}
return Pagination;
}
if (typeof module !=='undefined' && typeof exports === 'object') {
module.exports = factory();
} else if (typeof define === 'function' && (define.cmd || define.amd)) {
define(factory);
} else {
global.Pagination = factory();
}
})(typeof window !== 'undefined' ? window : global);
配合vue使用
// js
computed: {
paginationList: function () {
return this.pagination.create(this.page, this.count);
}
}
this.pagination = new Pagination({ size: this.size, showPrevAndNext: false, showFirstAndLast: false, showPageNumber: true });
// html
<div class="pagination-box f-tac">
<ul class="f-cb f-ib">
<li class="f-fl" v-for="(item, index) in paginationList" :class="{'active': item.active}" :key="index">
<a href="javascript:;" @click="onPaginationChanged(item)">{{item.text}}</a>
</li>
</ul>
</div>