Git Product home page Git Product logo

thinkjs-navigator's Introduction

ThinkJS-Navigator

遵照 ThinkJS 的数据结构,不依赖于任何模板工具的翻页组件;

安装使用

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>

参数说明

new Pager(pageinfo, baseurl);

  • pageinfo ThinkJS countSelect 返回的分页数据。
  • baseurl 用于拼接分页 URL 的原始 URL。

countSelect 的基本数据格式如下;

{
    count: 123, //总条数
    total: 10, //总页数
    page: 1, //当前页
    num: 20, //每页显示多少条
    data: [{}, {}] //详细的数据
}

anchor(anchor);

设定返回 HTML 链接的锚点链接;

  • anchor 锚点

render(prev, next, split, splitText, otherConf)

返回渲染的 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 使用

配合 BootStrap 的使用需要在返回的 HTML 外边包裹 <nav><ul class="pagination"></ul></nav> 这样的标签,并在 render 时候传值 currentClassactive

其他说明

这个组件不是必须 依赖于 ThinkJS,只需构造对应的数据格式即可;

Liceise

MIT

thinkjs-navigator's People

Contributors

alphatr avatar

Stargazers

 avatar

Watchers

 avatar

thinkjs-navigator's Issues

发现几个小问题

1、分页在使用时出现BUG,场景:
因为在Base公共类封装了list列表方法,所以baseURL是不定的,只能通过this.http.req.url获取,此插件分页输出在第一页没有问题,当点击到第二页时,第一页和上一页URL均变为 page=2(测试场景共2页数据)

2、分页URL未判断是否存在page
当分页激活非第一页时,其他页的地址可能变为 page=1&page=2

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.