11月04, 2014

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%>

本文链接:http://welefen.com/post/pager-under-thinkjs.html

-- EOF --

Comments

评论加载中...

注:如果长时间无法加载,请针对 disq.us | disquscdn.com | disqus.com 启用代理。