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

<ul aria-label="Page navigation" id="pages"></ul>
<script type="text/javascript">
    let options = {
        bootstrapMajorVersion: 3,
        currentPage: "<%= pages.current %>",
        totalPages: "<%= pages.total %>",
        size: "small",
        itemTexts: function(type, page, current) {
            switch (type) {
                case "first":
                    return "&laquo;";
                case "prev":
                    return "&lsaquo;";
                case "next":
                    return "&rsaquo;";
                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 = true;
                    break;
            }
            return result;

        },
        pageUrl: function(type, page, current){
            let queryData = JSON.parse(pages.queryData);
            // 如果没有附带查询条件则直接返回
            if (typeof queryData !== 'object') {
                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 '?' + firstQuery + '&' + queryString;
        }
    };
    if (options.totalPages > 0) {
        $("#pages").bootstrapPaginator(options);
    }
</script>