展现数据列表的时候经常要用到页面显示,thinkjs中结合countSelect和分页展现组件来很好的实现该功能。
效果图如:
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);
})
}
<%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微信公众号
有一错误,
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;
});
共收到3条回复