翻页器 / Pager

优质

小牛编辑

126浏览

2023-12-01

简单版本

<div class="container">
  <div id="pager" class="ui-pager"></div>
</div>

require(['jquery', 'moye/Pager'], function ($, Pager) {
  new Pager({
    main: document.getElementById('pager'),
    page: 0,
    first: 0,
    total: 10,
    padding: 3
  })
  .render();
});

设置总页面

与下拉框组合使用，设置总页码

require(['jquery', 'moye/Pager'], function ($, Pager) {
  new Pager({
    main: document.getElementById('pager-normal'),
    page: 1,
    first: 1,
    total: 5,
    showCount: 10,
    lang: {
      prev: '◀',
      next: '▶'
    },
    getPageItemHTML: function (page, part) {
      var className = this.getItemClassName(Array.prototype.slice.call(arguments, 1).concat('item'));

      return ''
        + '<a href="#" data-page="' + page + '" '
        +  'class="' + className + '">'
        +  '●'
        + '</a>';
    }
  })
  .render();
});

自定义页码展现

require(['jquery', 'moye/Pager'], function ($, Pager) {

  new Pager({
    main: document.getElementById('pager-normal'),
    page: 1,
    first: 1,
    total: 5,
    showCount: 10,
    lang: {
      prev: '◀',
      next: '▶'
    },
    getPageItemHTML: function (page, part) {
      var className = this.getItemClassName(Array.prototype.slice.call(arguments, 1).concat('item'));

      return ''
        + '<a href="#" data-page="' + page + '" '
        +  'class="' + className + '">'
        +  '●'
        + '</a>';
    }
  })
  .render();
  
});

精简版分页

require(['jquery', 'moye/Pager'], function ($, Pager) {

  new Pager({
    main: document.getElementById('pager-simple'),
    page: 1,
    first: 1,
    total: 5,
    showCount: 10,
    mode: 'simple'
  })
  .render();
  
});

精简版分页灵活运用

require(['jquery', 'moye/Pager'], function ($, Pager) {

  new Pager({
    main: document.getElementById('pager-simple-change'),
    page: 1,
    first: 1,
    total: 5,
    showCount: 10,
    mode: 'simple',
    getPageItemHTML: function (page) {
      return ' 当前第<input value="'
          + page
          + '" style="width: 20px;text-align:center" />'
          + '页，共' + this.total + '页 ';
    }
  })
  .render();
  
});

分页 getPage 和 setPage 使用

require(['jquery', 'moye/Pager'], function ($, Pager) {

  var pagerTest = new Pager({
    main: document.getElementById('pager-set'),
    page: 1,
    first: 1,
    total: 5,
    showCount: 10,
    mode: 'simple',
    getPageItemHTML: function (page) {
      return ' 当前第<input value="'
          + page
          + '" style="width: 20px;text-align:center" />'
          + '页，共' + this.total + '页 ';
    }
  })
  .render();

  $('#pager-set-prev').click(function () {
    var page = pagerTest.getPage();

    // pagerTest.setPage(page - 1);
    pagerTest.set('page', page - 1);
  });

  $('#pager-set-next').click(function () {
    var page = pagerTest.getPage();

    pagerTest.setPage(page + 1);
  });
  
});

全部配置参数

属性名	类型	说明
disabled	boolean	控件的不可用状态
main	HTMLElement	控件渲染容器
page	number	当前页（第一页从0开始）
first	number	起始页码，默认为0
padding	number	当页数较多时，首尾显示页码的个数
showAlways	boolean	是否一直显示分页控件
showCount	number	当页数较多时，中间显示页码的个数
total	number	总页数
anchor	string	跳转链接
mode	string	分页类型（normal/simple）
getPageItemHTML	function	分页item字符串
lang	Object<string, string=""></string,>	用于显示上下页的文字
lang.prev	string	上一页显示文字(支持HTML)
lang.next	string	下一页显示文字(支持HTML)
lang.ellipsis	string	省略处显示文字(支持HTML)

在页面切换的时候可以绑定回调事件 onChange。