分页 KLPager

基本形式

跳至多少页,支持输入后,按回车键触发哦!

分页 KLPager - 图1

  1. <kl-pager current={current} sumTotal={sumTotal} pageSize={pageSize} />
  1. var component = new NEKUI.Component({
    template: template,
    config: function(data) {
    data.current = 3;
    data.pageSize = 10;
    data.sumTotal = 200;
    }
    });

不展示pageSize下拉或者总条数

只要不设置pageSize或sumTotal即可,但是需要单独传入每页的条数total, total的值是Math.ceil(sumTotal/pageSize)

分页 KLPager - 图2

  1. <pager total={Math.ceil(sumTotal/pageSize)} current={current}></pager>
  1. var component = new NEKUI.Component({
    template: template,
    config: function(data) {
    data.current = 3;
    data.pageSize = 10;
    data.sumTotal = 100;
    }
    });

总条数展示场景一

如果总条数有200多条,后端只返回200,通过设置isEllipsis使总条数展示位200+

分页 KLPager - 图3

  1. <kl-pager current={3} sumTotal={200} pageSize={5} isEllipsis={true} />

总条数展示场景二

总条数特别多的时候,可以设置一个最大值x,超过这个值的时候页面展示位x+

分页 KLPager - 图4

  1. <kl-pager current={3} sumTotal={2000000} pageSize={20} maxTotal={2000} />

翻页器展示形式(一般不需要设置)

可以设置翻页器展示的形式,设置两端显示的按钮数以及中间展示的按钮数量

分页 KLPager - 图5

  1. <kl-pager pageSize={5} current={6} sumTotal={100} middle={3} side={1} />

实际业务中推荐做法

通过watch pageSizecurrent的值来请求列表数据,不推荐使用pager的select事件来处理;

分页 KLPager - 图6

  1. <kl-pager current={current} sumTotal={sumTotal} pageSize={pageSize} />
  1. var component = new NEKUI.Component({
    template: template,
    watchedAttr: ['current', 'pageSize'],
    config: function(data) {
    data.current = 3;
    data.pageSize = 10;
    data.sumTotal = 200;
    this.$watch(this.watchedAttr, function() {
    this.__getList();
    });
    },
    __getList: function() {
    console.log('更新列表数据');
    }
    });

API

KLPager

KLPager

ParamTypeDefaultDescription
[options.data]object= 绑定属性
[options.data.current]number1<=> 当前页
[options.data.total]number0=> 总页数
[options.data.sumTotal]number0=> 总个数
[options.data.pageSize]number20=> 每页个数
[options.data.middle]number5=> 当页数较多时,中间显示的页数
[options.data.side]number2=> 当页数较多时,两端显示的页数
[options.data.step]number5=> 每页条数选择步长
[options.data.maxPageSize]number50=> 最大可设置的每页条数
[options.data.isEllipsis]booleanfalse=> 是否展示位总条数+
[options.data.maxTotal]number=> 总条数超过maxTotal条数时,展示为maxTotal+条数
[options.data.class]string=> 补充class

select 选择某一页时触发Event

NameTypeDescription
senderobject事件发送对象
currentobject当前选择页