npm install thinkjs-navigator
git 地址:https://github.com/AlphaTr/thinkjs-navigator.git
;
var Pager = require('thinkjs-navigator');
var baseUrl = "/index.html";
D('Article').page(this.get("page"), 20).countSelect().then(function(data){
var pager = new Pager(data, baseUrl);
console.log(pager.render());
});
返回类似于下面的 HTML
<li class="prev"><a href="/index.html?page=8" class="prev">Prev</a></li>
<li><a href="/index.html">1</a></li>
<li><span>...</span></li>
<li><a href="/index.html?page=6">6</a></li>
<li><a href="/index.html?page=7">7</a></li>
<li><a href="/index.html?page=8">8</a></li>
<li class="current"><a href="/index.html?page=9" class="current">9</a></li>
<li><a href="/index.html?page=10">10</a></li>
<li><a href="/index.html?page=11">11</a></li>
<li><a href="/index.html?page=12">12</a></li>
<li><span>...</span></li>
<li><a href="/index.html?page=30">30</a></li>
<li class="next"><a href="/index.html?page=10" class="next">Next</a></li>
pageinfo
ThinkJS countSelect 返回的分页数据。baseurl
用于拼接分页 URL 的原始 URL。countSelect 的基本数据格式如下;
{
count: 123, //总条数
total: 10, //总页数
page: 1, //当前页
num: 20, //每页显示多少条
data: [{}, {}] //详细的数据
}
设定返回 HTML 链接的锚点链接;
anchor
锚点返回渲染的 HTML
prev
上一页文本,默认为 "PREV";next
下一页文本,默认为 "NEXT";split
分割大小,即连续最多出现 split 个链接,默认为 3;splitText
分割字符,默认 "...";otherConf
其他一些配置,包括标签,Class 的配置,默认值和格式如下;{
itemTag: 'li', // 每个按钮的标签
textTag: 'span', // 分割符文本的标签
currentClass: 'current', // 当前选中的页码 Class
prevClass: 'prev', // 上一页 Class
nextClass: 'next' // 下一页 Class
}
注意:render 返回的 HTML 不包含 li 外层的 ul 标签,所以需要自己加上;
配合 BootStrap 的使用需要在返回的 HTML 外边包裹 <nav><ul class="pagination"></ul></nav>
这样的标签,并在 render 时候传值 currentClass
为 active
;
这个组件不是必须 依赖于 ThinkJS,只需构造对应的数据格式即可;
MIT
扫码关注w3ctech微信公众号
赞一个
1、分页在使用时出现BUG,场景: 因为在Base公共类封装了list列表方法,所以baseURL是不定的,只能通过this.http.req.url获取,此插件分页输出在第一页没有问题,当点击到第二页时,第一页和上一页URL均变为 page=2(测试场景共2页数据)
2、分页URL未判断是否存在page 当分页激活非第一页时,其他页的地址可能变为 page=1&page=2
我是小白一个,请教个问题:试图文件下的<form>标签的"action"请求路径该怎么写,有什么方法直接调用到controller里面的action吗?(坐等恢复中……)
@sniper2014
/groupName/ControllerName/ActionName 如: /home/article/add
@welefen 谢谢回复。继续学习中,以后可能会经常向你请教。
共收到5条回复