ConstructionCost/web/common/html/page.html

<nav aria-label="...">
    <ul class="pagination" id="pages"></ul>
</nav>
<script type="text/javascript" src="/lib/bootstrap/bootstrap-paginator.js"></script>
<script type="text/javascript">
    let options = {
        bootstrapMajorVersion: 3,
        currentPage: "<%= pages.current %>",
        totalPages: "<%= 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 "最后一页";
                case "page":
                    return page;
            }
        },
        shouldShowPage: function (type, page, current) {
            let result = true;
            switch (type) {
                case "first":
                    result = (current !== 1);
                    break;
                case "prev":
                    break;
                case "next":
                    break;
                case "last":
                    result = false;
                    break;
                case "page":
                    result = true;
                    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);
    }
</script>