|
|
|
/**
|
|
|
|
* guang
|
|
|
|
* @author: lcy<chuanyang.liu@yoho.cn>
|
|
|
|
* @date: 2016/09/01
|
|
|
|
*/
|
|
|
|
|
|
|
|
'use strict';
|
|
|
|
|
|
|
|
var $ = require('yoho-jquery');
|
|
|
|
|
|
|
|
var ALL_TYPES = {
|
|
|
|
stand: 'p-page-n',
|
|
|
|
mini: 'p-n',
|
|
|
|
full: 'f-p-page-n-l-info-input-gobtn',
|
|
|
|
fullellipsis: 'f-p-pe-n-l-info-input-gobtn',
|
|
|
|
ellipsis: 'p-pe-n'
|
|
|
|
};
|
|
|
|
|
|
|
|
module.exports = function(opts) {
|
|
|
|
|
|
|
|
var options = opts || {};
|
|
|
|
|
|
|
|
var baseUrl = options.baseUrl || '',
|
|
|
|
page = (options.page || 1) * 1,
|
|
|
|
showNum = (options.showNum || 7) * 1,
|
|
|
|
pageSize = options.pageSize || 20,
|
|
|
|
totalPages = options.totalPages,
|
|
|
|
totalRecords = options.totalRecords,
|
|
|
|
theme = options.theme || 'pager',
|
|
|
|
currentClass = options.currentClass || 'cur',
|
|
|
|
|
|
|
|
// min full stand ellipsis or: f-首页, p-上一页, page-页码，n-下一页，l-最后一页，info-displayMsg，inout输入框，gobtn-goto Btn
|
|
|
|
type = options.type || 'stand',
|
|
|
|
pageVar = options.pageVar || 'page',
|
|
|
|
pageSizeVar = options.pageSizeVar || 'pageSize';
|
|
|
|
|
|
|
|
// 清除原来page(page=1&) 重新定义page
|
|
|
|
var clearPageReg = new RegExp(pageVar + '=[^&]*(&|$)'),
|
|
|
|
clearSizeReg = new RegExp(pageSizeVar + '=[^&]*(&|$)'),
|
|
|
|
base = baseUrl.replace(clearPageReg, '');
|
|
|
|
|
|
|
|
if (options.pageSize) {
|
|
|
|
base = base.replace(clearSizeReg, '');
|
|
|
|
}
|
|
|
|
|
|
|
|
base += (base.indexOf('?') < 0 ? '?' : (/(\?|&)$/.test(base) ? '' : '&')) +
|
|
|
|
(options.pageSize ? (pageSizeVar + '=' + pageSize + '&') : '') +
|
|
|
|
pageVar + '=';
|
|
|
|
|
|
|
|
function getPageNums(ntype) {
|
|
|
|
var pageNums = [];
|
|
|
|
var num = showNum;
|
|
|
|
|
|
|
|
if (ntype === 'e') {
|
|
|
|
num = num - 2;
|
|
|
|
num = num > 2 ? num : 2;
|
|
|
|
}
|
|
|
|
|
|
|
|
/** 分页展示页码个数begin 规则：展示最靠近当前页的指定个数 **/
|
|
|
|
var pageShowMax = num % 2 === 0 ? page - 1 : page;
|
|
|
|
var pageShowMin = page;
|
|
|
|
|
|
|
|
for (var i = 0; i < Math.floor(num / 2); i++) {
|
|
|
|
pageShowMax++;
|
|
|
|
pageShowMin--;
|
|
|
|
if (pageShowMax > totalPages) {
|
|
|
|
pageShowMax = totalPages;
|
|
|
|
if (pageShowMin > 1) {
|
|
|
|
pageShowMin--;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
if (pageShowMin < 1) {
|
|
|
|
pageShowMin = 1;
|
|
|
|
if (pageShowMax < totalPages) {
|
|
|
|
pageShowMax++;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
for (var n = pageShowMin; n <= pageShowMax; n++) {
|
|
|
|
pageNums.push(n);
|
|
|
|
}
|
|
|
|
|
|
|
|
if (ntype === 'e') {
|
|
|
|
if (pageShowMin > 3) {
|
|
|
|
pageNums.unshift(1, '.');
|
|
|
|
} else if (pageShowMin === 2) {
|
|
|
|
pageNums.unshift(1);
|
|
|
|
} else if (pageShowMin === 3) {
|
|
|
|
pageNums.unshift(1, 2);
|
|
|
|
}
|
|
|
|
|
|
|
|
if (pageShowMax < totalPages - 2) {
|
|
|
|
pageNums.push('.', totalPages);
|
|
|
|
} else {
|
|
|
|
for (var x = pageShowMax + 1; x <= totalPages; x++) {
|
|
|
|
pageNums.push(x);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
return pageNums;
|
|
|
|
}
|
|
|
|
|
|
|
|
function renderItem(arr) {
|
|
|
|
/** 分页展示页码个数end **/
|
|
|
|
var ret = '';
|
|
|
|
|
|
|
|
if ($.isArray(arr) && arr.length) {
|
|
|
|
|
|
|
|
arr.forEach((val) => {
|
|
|
|
if (val === '.') {
|
|
|
|
ret += '<a>...</a>';
|
|
|
|
} else {
|
|
|
|
ret += '<a href="javascript:void(0)" data-page="'+ base + val +'"' +
|
|
|
|
(page === val ? 'class="'+ currentClass +'"' : '') +
|
|
|
|
' title="第'+ val +'页">'+ val + '</a>';
|
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
return ret;
|
|
|
|
}
|
|
|
|
|
|
|
|
function createStandItems() {
|
|
|
|
return renderItem(getPageNums());
|
|
|
|
}
|
|
|
|
|
|
|
|
function createEllipsisItems() {
|
|
|
|
return renderItem(getPageNums('e'));
|
|
|
|
}
|
|
|
|
|
|
|
|
if (!totalPages) {
|
|
|
|
if (!totalRecords || !pageSize) {
|
|
|
|
return '';
|
|
|
|
} else {
|
|
|
|
totalPages = Math.ceil(totalRecords / pageSize);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
var items = ALL_TYPES[type] ? ALL_TYPES[type] : type;
|
|
|
|
|
|
|
|
items = $.isArray(items) ? items : (items || ALL_TYPES.stand).split('-');
|
|
|
|
|
|
|
|
var hasPage = false; // 配置中如果配置了多次 page/pe 则将忽略，只第一次有效
|
|
|
|
var ret = '<div class="pager'+' '+theme +'">';
|
|
|
|
items.forEach(function(val) {
|
|
|
|
|
|
|
|
switch (val) {
|
|
|
|
case 'f' :
|
|
|
|
if (page > 1) {
|
|
|
|
|
|
|
|
ret += '<a href="javascript:void(0)" title="首页" data-page="'+ base +'1">首页</a>';
|
|
|
|
}
|
|
|
|
break;
|
|
|
|
case 'p' :
|
|
|
|
if (page > 1) {
|
|
|
|
|
|
|
|
ret += '<a href="javascript:void(0)" data-page="'+ base + (page - 1) +
|
|
|
|
'" title="上一页"><span class="iconfont"></span>上一页</a>';
|
|
|
|
}
|
|
|
|
break;
|
|
|
|
case 'n' :
|
|
|
|
if (page < totalPages) {
|
|
|
|
ret += '<a href="javascript:void(0)" data-page="'+ base + (page + 1) +
|
|
|
|
'" title="下一页">下一页<span class="iconfont"></span></a>';
|
|
|
|
}
|
|
|
|
break;
|
|
|
|
case 'l' :
|
|
|
|
if (page < totalPages) {
|
|
|
|
ret += '<a href="javascript:void(0)" data-page="'+ base + totalPages +'" title="尾页">尾页</a>';
|
|
|
|
}
|
|
|
|
break;
|
|
|
|
case 'info' :
|
|
|
|
ret += '共{totalRecords}条/{totalPages}页';
|
|
|
|
break;
|
|
|
|
case 'input' :
|
|
|
|
// input
|
|
|
|
// ret += '<span class="{cls}"><input value="{value}" type="text"></span>';
|
|
|
|
break;
|
|
|
|
case 'gobtn' :
|
|
|
|
// goto btn
|
|
|
|
break;
|
|
|
|
case 'page' :
|
|
|
|
if (!hasPage) {
|
|
|
|
ret += createStandItems();
|
|
|
|
}
|
|
|
|
hasPage = true;
|
|
|
|
break;
|
|
|
|
case 'pe' :
|
|
|
|
if (!hasPage) {
|
|
|
|
ret += createEllipsisItems();
|
|
|
|
}
|
|
|
|
hasPage = true;
|
|
|
|
break;
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
if (options.fn) {
|
|
|
|
ret += options.fn(options.context);
|
|
|
|
}
|
|
|
|
ret += '</div>';
|
|
|
|
return ret;
|
|
|
|
}; |
...
|
...
|
|
