Calculation/app/view/layout/page.ejs

<style>
    ul.pagination {
        text-align: center!important;
        justify-content: center!important;
    }
</style>
<nav aria-label="Page navigation example">
    <ul class="pagination pagination-sm">
    </ul>
</nav>
<script type="text/javascript" src="/public/js/bootstrap/bootstrap-paginator.js"></script>
<script type="text/javascript">
    let options = {
        bootstrapMajorVersion: 4,
        currentPage: "<%= pageInfo.page %>",
        totalPages: "<%= pageInfo.total %>",
        numberOfPages: 5,
        size: "small",
        itemContainerClass: function(type, page, current) {
            let className = 'page-item';
            this.currentPage = parseInt(this.currentPage);
            this.totalPages = parseInt(this.totalPages);

            switch (type) {
                case "first":
                    className = this.currentPage === 1 ? className + ' disabled' : className;
                    break;
                case "prev":
                    className = this.currentPage === 1 ? className + ' disabled' : className;
                    break;
                case "next":
                    className = this.currentPage === this.totalPages ? className + ' disabled' : className;
                    break;
                case "last":
                    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 '<i class="fa fa-caret-left"></i>';
                case "prev":
                    return '<i class="fa fa-angle-left"></i>';
                case "next":
                    return '<i class="fa fa-angle-right"></i>';
                case "last":
                    return '<i class="fa fa-caret-right"></i>';
                case "page":
                    return page;
                case "more":
                    return '...';
            }
        },
        shouldShowPage: function (type, page, current) {
            let result = true;
            switch (type) {
                case "first":
                    break;
                case "prev":
                    break;
                case "next":
                    break;
                case "last":
                    break;
                case "page":
                    break;
                case "more":
                    result = (page !== this.totalPages);
                    break;
            }
            return result;

        },
        pageUrl: function(type, page, current){
            let queryData = JSON.parse('<%- pageInfo.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;
        }
    };
    const pageSizeSelect = <%- pageInfo.pageSizeSelect ? parseInt(pageInfo.pageSizeSelect) : 0 %>;
    if (options.totalPages > 1 || pageSizeSelect) {
        $(".pagination").bootstrapPaginator(options);
        setSelectPageSize(pageSizeSelect);
    } else {
        $(".pagination").hide();
    }

    function setSelectPageSize(psSelect) {
        if (psSelect === 1) {
            let queryData = JSON.parse('<%- pageInfo.queryData %>');
            // 有其它数据则重新赋值page，然后组合字符串
            delete queryData.page;
            delete queryData.pageSize;
            let queryArray = [];
            for(let tmp in queryData) {
                let tempString = tmp + '=' + queryData[tmp];
                queryArray.push(tempString);
            }
            let firstQuery = queryArray.shift();
            let queryString = queryArray.join('&');
            queryString = firstQuery ? (queryString === '' ? '?' + firstQuery : '?' + firstQuery + '&' + queryString) : '';

            const pshtml = '<li class="page-item disabled">\n' +
                '            <span class="page-link" >共' + <%- pageInfo.total_num %> + '条</span>\n' +
                '            </li>\n' +
                '            <li class="page-item">\n' +
                '            <span class="page-link" >\n' +
                '            <div class="btn-group">\n' +
                '            <a type="button" class="text-primary dropdown-toggle" data-toggle="dropdown" id="zhankai" >每页' + <%- pageInfo.pageSize %> + '条</a>\n' +
                '            <div class="dropdown-menu" id="zhankaiSelect" aria-labelledby="zhankai" style="">\n' +
                '            <a class="dropdown-item" data-size="15" href="'+ (queryString === '' ? '?pageSize=15' : queryString + '&pageSize=15') +'">每页15条</a>\n' +
                '            <a class="dropdown-item" data-size="30" href="'+ (queryString === '' ? '?pageSize=30' : queryString + '&pageSize=30') +'">每页30条</a>\n' +
                '            <a class="dropdown-item" data-size="50" href="'+ (queryString === '' ? '?pageSize=50' : queryString + '&pageSize=50') +'">每页50条</a>\n' +
                '            <a class="dropdown-item" data-size="100" href="'+ (queryString === '' ? '?pageSize=100' : queryString + '&pageSize=100') +'">每页100条</a>\n' +
                '            </div>\n' +
                '            </div>\n' +
                '            </span>\n' +
                '            </li>';
            $('.pagination').prepend(pshtml);
        }
    }

    $('#zhankaiSelect a').on('click', function () {
        setLocalCache('account-pageSize', $(this).data('size'));
    })
</script>