现在位置首页 / 前端开发 /正文

简单自由的分页生成器:Paging 使用教程

作者: IT小兵 | 2015年5月12日| 热度:℃ | 评论: |参与:

Paging 只需要知道当前页码和总页数就可以快速生成分页。

官方地址:http://spmjs.io/docs/paging/latest/

Paging 自带了一套默认的模板和样式:

Paging 的使用方法非常简单:

<link rel="stylesheet" href=" 
<script src="http://static.nimojs.com/umd/paging/0.0.1/paging.js"></script><div id="view">
</div><script>var html = Paging.render({    // 当前页
    currentPage: 2,    // 总页数
    pageCount: 10,    // 链接前缀
    link: '?id='})document.getElementById('view').innerHTML = html</script>

浏览器中使用

<link rel="stylesheet" href=" 
<script src="http://static.nimojs.com/umd/paging/0.0.1/paging.js"></script><div id="view">
</div><script>var html = Paging.render({    // 当前页
    currentPage: 2,    // 总页数
    pageCount: 10,    // 链接前缀
    link: '?id='})
document.getElementById('view').innerHTML = html</script>

bower

$ bower install --save paging.js<script type="text/javascript" 
src="./bower_components/paging.js/dist/paging.js"></script>

seajs

<link rel="stylesheet" href=" 
<script src="http://static.nimojs.com/umd/seajs/3.0.0/sea.js" id="seajsnode" ></script>
<div id="view"></div><script>seajs.config({    // 配置 alias 使用在线版本或下载 paging 和 mustache 存放在本地
    // 下载到本地使用时请注意 《ID 和路径匹配原则》https://github.com/seajs/seajs/issues/930
    alias: {        "paging/0.0.1/paging": 'http://cmd.nimojs.com/cmd/paging/0.0.1/paging.js',    
        "mustache/2.0.0/mustache": "http://cmd.nimojs.com/cmd/mustache/2.0.0/mustache.js"
    }
})
seajs.use('paging/0.0.1/paging' ,function (Paging) {
    var html = Paging.render({        // 当前页
        currentPage: 1,        // 总页数
        pageCount: 10,        // 链接前缀
        link: '?id='
    })
    document.getElementById('view').innerHTML = html
})</script>

基于 node/spm 开发

命令行安装

$ spm install paging --save
// 或者
$ npm install paging --save

使用

var Paging = require('paging');// use paging

显示总页数为 10 的分页

<link rel="stylesheet" href=" 
<script src="http://static.nimojs.com/umd/paging/0.0.1/paging.js"></script><div id="view1">
</div><hr><div id="view2"></div><hr><div id="view3"></div><hr><div id="view4"></div>
<hr>
<div id="view5"></div><hr><div id="view6"></div><hr><div id="view7"></div>
<hr><div id="view8"></div><hr><div id="view9"></div><hr><div id="view10">
</div><script>for (var i = 1;i < 11; i++) {
    document.getElementById('view' + i).innerHTML = Paging.render({
        currentPage: i,
        pageCount: 10,
        beforePageCount: 10,
        afterPageCount: 10,
        link: '#view'
    })    
}</script>

更多示例

  1. 自定义界面

  2. AJAX无刷新分页

  3. 控制前后几页显示数量

  4. bootstrap 分页

  5. handlebars & createData


点击阅读本文所属分类的更多文章: 前端开发 。和高手一起交流:346717337
友荐云推荐

未注明转发、原文均为本站原创。分享本文请注明 原文链接

给您更多信息和帮助

在这里您可以找到更多:

技术交流群:346717337 Jquery插件交流

投稿:suchso@vip.qq.com

承接:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/业务咨询

抢天猫双11红包
推荐使用阿里云服务器
echarts教程系列
本月最热文章

微信扫一扫,徜徉悠嘻网,您的休闲乐园

微信公众号:快乐每一天

随机文章
标签

技术交流群:346717337

投稿:suchso@vip.qq.com

专业专注:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/付费问题咨询