w3ctech

thinkjs下的分页示例

展现数据列表的时候经常要用到页面显示，thinkjs中结合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);
    })
}

分页模版代码 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>
<%}%>

该文件见：

模版代码

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

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

扫码关注w3ctech微信公众号

共收到3条回复

  • 阿特 2015-05-12 23:46

    有一错误，

    var htmlMaps = {
        '<': '<',
        '>': '>',
        '"': '"e;',
        "'": '''
    }

    应该是

    var htmlMaps = {
        '<': '<',
        '>': '>',
        '"': '"e;',
        "'": "'"
    }
    回复此楼

  • hu jun 2016-03-16 10:09

    我也来提供一段代码，是我自己写的。用的模版引擎是nunjucks

    {# 分页器模板 #}
{% macro page(total, curr, count) %}
{% if total >= 2 %}
  {% set step = 3 %}
  <nav data-total="{{total}}" data-curr="{{curr}}" class="pagination-wrap">
    <ul style="vertical-align: middle" class="pagination">
      {# 添加上一页 #}
      {% if curr > 1 %}
      <li><a data-index="{{ curr - 1 }}" href="{{controller|url({_pn: curr-1},[])}}">«</a></li>
      {% endif %}

      {# 当前页之前 #}
      {% if (curr - step) > 2 %}
        <li><a data-index="1" href="{{controller|url({_pn: 1},[])}}">1</a></li>
        <li class='omission'><span>...</span></li>
        {% for index in range(curr-step, curr) %}
          <li><a data-index="{{ index }}" href="{{controller|url({_pn: index},[])}}">{{ index }}</a></li>
        {% endfor %}
      {% else %}
        {% for index in range(1, curr) %}
          <li><a data-index="{{ index }}" href="{{controller|url({_pn: index},[])}}">{{ index }}</a></li>
        {% endfor %}
      {% endif %}

      {# 当前页 #}
      <li class="active"><span data-index="{{ curr }}">{{curr}}</span></li>

      {# 当前页之后 #}
      {% if (total - curr - step) >= 2 %}
        {% for index in range((curr+1), (curr+step+1))%}
          <li><a data-index="{{ index }}" href="{{controller|url({_pn: index},[])}}">{{ index }}</a></li>
        {% endfor %}
        <li class='omission'><span>...</span></li>
        <li><a data-index="{{total}}" href="{{controller|url({_pn: total},[])}}">{{total}}</a></li>
      {% else %}
        {% for index in range((curr+1), total+1)%}
          <li><a data-index="{{ index }}" href="{{controller|url({_pn: index},[])}}">{{ index }}</a></li>
        {% endfor %}
      {% endif %}

      {# next #}
      {% if curr < total %}
        <li><a data-index="{{ curr + 1 }}" href="{{controller|url({_pn: curr+1},[])}}">»</a></li>
      {% endif %}

      <li class="go-input"><a><input type="text" placeholder="跳页"></a></li>
      <li><a class="js-pager-go">跳转</a></li>

    </ul>
    <span>共{{count}}条数据</span>
  </nav>
{% endif %}
{% endmacro %}

{{page(data.totalPages, data.currentPage, data.count)}}

    Controller代码

    async indexAction(){
  let model = this.model("tag");
  let page = this.get("_pn") || 1;
  let data = await model.page(page, 10).countSelect();

  this.assign('data', data);
  return this.display();
}
    回复此楼

  • hu jun 2016-03-16 10:13

    补充上面的url filter

    env.addFilter("url", function(controller, params={}, expect=[]){
    for(let item in params) {
        expect.push(item);
    }
    //console.log(expect);

    var params_arr = [];

    for(let key in controller.get()) {
        if ( expect.indexOf(key) == -1) {
            params_arr.push(`${key}=${encodeURIComponent(controller.get(key))}`);
        }
    }

    for(let key1 in params) {
        params_arr.push(`${key1}=${encodeURIComponent(params[key1])}`);
    }

    //console.log("---------------------------------");
    var url_preix = controller.http.url.split("?");
    if (params_arr.length > 0) {
        return url_preix[0] + "?" + params_arr.join("&");
    }
    return controller.http.url;
});
    回复此楼