云鉴权>> paging>> 返回
项目作者： jinming6568

项目描述 ：
基于原生javascript的分页插件，支持ajax，跳链接，页面内数据分页
高级语言： JavaScript
项目地址: git://github.com/jinming6568/paging.git
创建时间： 2017-03-08T06:42:36Z
项目社区：https://github.com/jinming6568/paging
开源协议：
下载


paging

Simple paging plugin with no dependence .

特点 / Feature

  1. 基于原生javascript,不依赖任何工具框架 / Based on javascript with no dependence .
  2. 支持模块化 / Support amd and cmd .
  3. 支持 分页，上下页，首尾页，总页数，跳页，外部调用方法等绝大部分分页功能。 / Support normal paging , prev and next page , first and last page , total pages , skip to some page and more methods .
  4. 兼容 Chrome , Firefox , Opera , IE6+ 等绝大部分浏览器 。（实例展示中的样式只保证IE8的正确展示，对IE6,7并没有做兼容，但JS逻辑对IE6,7均有兼容处理，可根据需求自行调整样式即可。） / support IE 6+ , Chrome , Firefox , Opera . (Example page only make sure that style is well in IE8 , IE6 and IE7 may not run very well , however js in IE6 and IE7 is very well , all you need is just make you own style .)

实例展示/example page and 参考文档/api page

启用 / Getting started

  1. <script src="js/paging.js"></script>
  2. <link rel="stylesheet" href="css/paging.css" />
  3. <div id="pagination"></div>
  4. <script>
  5. var paging1 = paging({
  6.     cont:'pagination',
  7.     pages:12,
  8.     groups:5,
  9.     curr:6,
  10.     total:true,
  11.     skip:true,
  12.     pageChange:function (tpage) {
  13.         location.href = '?pageIndex='+tpage;
  14.     },
  15.     overPageSkip:function (tpage) {
  16.         alert('最大页数为'+this.opts.pages+'，您选择的是'+tpage+'。\n'+'total page is'+this.opts.pages+', your target is '+tpage+' .');
  17.     } 
  18. });
  19. </script>

demo.png

参数/Options

Name Type Default Description
cont String/Object ‘pagination’ 用来储存分页DOM元素，支持传入ID名称或者原生DOM对象 / Div for the paging DOM element .
pages Number 1 分页总数 / Total pages number
curr Number 1 当前页码 / Current page number
groups Number 5 显示连续分页数量 / Serial pages number
first String/Number/Boolean 1 首页按钮显示内容，默认为1，传入false时不显示 / First page button’s content . It would hide when the value is false .
last String/Number/Boolean 默认等于总页数/equal to pages 尾页显示内容，默认等于总页数，传入false时不显示 / Last page button’s content . It would hide when the value is false .
prev String ‘上一页’ 上一页按钮显示内容 / Prev page button’s content . It would hide when the value is false .
next String ‘下一页’ 下一页按钮显示内容 / Next page button’s content . It would hide when the value is false .
total Boolean false 是否显示总页数，默认不显示 / Show the total pages number or not .
skip Boolean false 是否开启跳页，默认不开启 / Switch to the method of skip .
reset Boolean false 第一次加载是否触发跳页事件，默认为false / Trigger the pageChange callback for the first time init paging or not .

事件 / Events

  • pageChange : 分页跳转回调

    1. paging({
    2.   pageChange:function(opts) {
    3.       //console.log(this);此时this为当前pageing对象，通过this.opts可以拿到当前分页对象参数
    4.       //console.log(opts);opts === this.opts
    5.   }
    6. });

  • overPageSkip : 跳页或输入大于分页数时跳页触发事件

    1. paging({
    2.   overPageSkip:function(tpage) {
    3.       //console.log(this);此时this为当前pageing对象，通过this.opts可以拿到当前分页对象参数
    4.       //console.log(tpage);tpage为目标页码
    5.   }
    6. });

属性 / Attrs

  • .disabled(); : 是否禁用插件（主要应用于ajax分页时等待时间过长，可以设置disabled属性为true暂时禁用分页） / Whether turn off the plugin ( This is always used in ajax to turn off the plugin for the long waiting time . )
    1. var paging1 = paging(options);
    2. paging1.disabled = true; //switch on the plugin
    3. paging1.disabled = false; //switch off the plugin

方法 / Methods

  • .prev(); : 上一页

    1. var paging1 = paging(options);
    2. paging1.prev();//上一页

  • .next(); : 下一页

    1. var paging1 = paging(options);
    2. paging1.next();//下一页

  • .skip(num); : 跳页 num为想要跳页的页码

    1. var paging1 = paging(options);
    2. paging1.skip(5);//跳转至第五页