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条回复

  • 有一错误,

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

    应该是

    var htmlMaps = {
            '<': '<',
            '>': '>',
            '"': '"e;',
            "'": "'"
        }
    
    回复此楼
  • 我也来提供一段代码,是我自己写的。用的模版引擎是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();
    }
    
    回复此楼
  • 补充上面的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;
    });
    
    回复此楼