YangHuOperation/web/users/views/layout/page.html

<ul aria-label="Page navigation" id="pages"></ul>
<script type="text/javascript">

    let totalPage = "<%= pages.total %>";
    let current ="<%= pages.current %>";
    let pageArray = getPageArray(parseInt(totalPage),2,parseInt(current));
    let options = {
        bootstrapMajorVersion: 3,
        currentPage: "<%= pages.current %>",
        totalPages: "<%= pages.total %>",
        numberOfPages:"<%= pages.total %>",
        size: "normal",
        itemContainerClass: function(type, page, current) {
            let className = 'page-item';
            this.currentPage = parseInt(this.currentPage);
            this.totalPages = parseInt(this.totalPages);

            switch (type) {
                case "prev":
                    className = this.currentPage === 1 ? className + ' disabled' : className;
                    break;
                case "next":
                    className = this.currentPage === this.totalPages ? className + ' disabled' : className;
                    break;
                case "page":
                    className = page === this.currentPage ? className + ' active' : className;
                    break;
            }

            return className;
        },
        itemContentClass: function(type, page, current) {
            return 'page-link';
        },
        itemTexts: function(type, page, current) {
            switch (type) {
                case "first":
                    return "&laquo;";
                case "prev":
                    return "上一页";
                case "next":
                    return "下一页";
                case "last":
                    return "&raquo;";
                case "page":
                    return page;
            }
        },
        shouldShowPage: function (type, page, current) {
            let result = true;
            switch (type) {
                case "first":
                    result = (current !== 1);
                    break;
                case "prev":
                    result = false;
                    break;
                case "next":
                    result = false;
                    break;
                case "last":
                    result = (current != this.totalPages);
                    break;
                case "page":
                    result = pageArray.indexOf(page)!=-1;
                    break;
            }
            return result;

        },
        pageUrl: function(type, page, current){
            let queryData = JSON.parse('<%- pages.queryData %>');

            // 如果没有附带查询条件则直接返回
            if (Object.keys(queryData).length <= 0) {
                return "?page=" + page;
            }
            // 有其它数据则重新赋值page，然后组合字符串
            queryData.page = page;
            let queryArray = [];
            for(let tmp in queryData) {
                let tempString = tmp + '=' + queryData[tmp];
                queryArray.push(tempString);
            }

            let firstQuery = queryArray.shift();
            let queryString = queryArray.join('&');
            return  queryString === '' ? '?' + firstQuery : '?' + firstQuery + '&' + queryString;
        }
    };
    if (options.totalPages > 0) {
        $("#pages").bootstrapPaginator(options);
    }

    function getPageArray(totalPage,offset,current) {
        let showPageArray = [current];
        let pre_fix = current - offset;
        let tai_fix = current + offset;
        if(pre_fix<=0){
            for(let p =1;p <= Math.abs(pre_fix)+1;p++){
                showPageArray.push(current + offset +p)
            }
        }
        if(tai_fix > totalPage){
            for(let t=1;t < (tai_fix - totalPage)+1;t++){
                showPageArray.push(current - offset - t)
            }
        }
        for(let i=1;i<= offset;i++){
            let pre = current - i;
            let next = current + i;
            if(pre > 0){
                showPageArray.push(pre);
            }
            if(next <= totalPage){
                showPageArray.push(next);
            }
        }
        return showPageArray;
    }
</script>