pager.js 6.12 KB
/**
 * 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) {
      /** 分页展示页码个数begin 规则:展示最靠近当前页的指定个数 **/
        var pageShowMax = num % 2 === 0 ? page - 1 : page;
        var pageShowMin = page;
        var pageNums = [];
        var num = showNum;
        var i, n;

        if (ntype === 'e') {
            num = num - 2;
            num = num > 2 ? num : 2;
        }

        for (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 (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">&#xe60e;</span>上一页</a>';
                }
                break;
            case 'n' :
                if (page < totalPages) {
                    ret += '<a href="javascript:void(0)" data-page="' + base + (page + 1) +
                            '" title="下一页">下一页<span class="iconfont">&#xe60c;</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;
};