ThinkJS 下的分页示例

展现数据列表的时候经常要用到页面显示，ThinkJS 1.0 中结合countSelect和分页展现组件来很好的实现该功能。

效果图如：

Controller代码

listAction: function(){
        var self = this;
        return D("Post").page(this.get("page")).countSelect().then(function(data){
            self.assign("pagerData", data); //这里assign的变量必须为pagerData，分页展示使用
            self.assign("list", data.data);
            self.display();
        })
    }

分页模版代码 pager.html

<%if(pagerData.total > 1){%>
    <%

    var pageUrl = pagerData.url;
    if(!pageUrl){
        var htmlMaps = {
            "<": "<",
            ">": ">",
            """: ""e;",
            """: """
        }
        var escape_html = function (str) {
            return (str + "").replace(/[<>""]/g, function(a){
                return htmlMaps[a];
            })
        }
        var prefix = "?";
        var querys = [];
        for(var name in http.query){
            if(name == "page") continue;
            querys.push(escape_html(name) + "=" + escape_html(http.query[name]));
        }
        prefix += querys.join("&");
        if(querys.length){
            prefix += "&";
        }
        pageUrl = prefix + "page=${page}";
    }
    %>
    <ul class="pagination">
        <%if(!pagerData.hideDesc){%>
        <li class="disabled"><span>共有<%=pagerData.count%>条记录，共<%=pagerData.total%>页</span></li>
        <%}%>
        <% if(pagerData.page > 1){ %>
            <li class="prev"><a href="<%=pageUrl.replace("${page}", pagerData.page - 1)%>">上一页</a></li>
        <% } %>
        <% 
            var num = pagerData.pageNum || 3;
            var pageIndex = [];
            var page = pagerData.page | 0 || 1;
            for (var i = page - num; i <= page + num; i++) {
                if (i >= 1 && i <= pagerData.total) {
                    pageIndex.push(i);
                };
            }
        %>
        <% if(pageIndex[0] > 1){ %>
            <li><a href="<%=pageUrl.replace("${page}", 1)%>">1</a></li>
        <%}%>
        <% if(pageIndex[0] > 2){ %>
            <li class="disabled"><span>...</span></li>
        <% } %>
        <%
            for (var i = 0, length = pageIndex.length; i < length; i++) {
                var p = pageIndex[i];
                if (p == page) { %>
                    <li class="active"><a href="<%=pageUrl.replace("${page}", p)%>"><%=p%></a></li>
                <% } else { %>
                    <li><a href="<%=pageUrl.replace("${page}", p)%>"><%=p%></a></li>
                <% }
            }
        %>
        <%
            if (pageIndex.length > 1) {
                var last = pageIndex[pageIndex.length - 1];
                if (last < (pagerData.total - 1)) { %>
                    <li class="disabled"><span>...</span></li>
                <% };
                if (last < pagerData.total) { %>
                    <li><a href="<%=pageUrl.replace("${page}", pagerData.total)%>"><%=pagerData.total%></a></li>
                <% };
            };
        %>
        <% if (page < pagerData.total) { %>
            <li class="next"><a href="<%=pageUrl.replace("${page}", pagerData.page + 1)%>">下一页</a></li>
        <% };%>
    </ul>
    <%}%>

该文件见： https://github.com/welefen/thinkpress/blob/master/App/View/Admin/inc/pager.html

模版代码

<!--展现数据列表代码-->

    <!--include分页文件-->
    <%include pager.html%>