分页 KLPager

基本形式

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

<kl-pager current={current} sumTotal={sumTotal} pageSize={pageSize} />

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)

<pager total={Math.ceil(sumTotal/pageSize)} current={current}></pager>

var component = new NEKUI.Component({
    template: template,
    config: function(data) {
        data.current = 3;
        data.pageSize = 10;
        data.sumTotal = 100;
    }
});

总条数展示场景一

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

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

总条数展示场景二

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

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

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

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

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

实际业务中推荐做法

通过watch pageSize 和 current的值来请求列表数据，不推荐使用pager的select事件来处理；

<kl-pager current={current} sumTotal={sumTotal} pageSize={pageSize} />

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

Param	Type	Default	Description
[options.data]	`object`		= 绑定属性
[options.data.current]	`number`	`1`	<=> 当前页
[options.data.total]	`number`	`0`	=> 总页数
[options.data.sumTotal]	`number`	`0`	=> 总个数
[options.data.pageSize]	`number`	`20`	=> 每页个数
[options.data.middle]	`number`	`5`	=> 当页数较多时，中间显示的页数
[options.data.side]	`number`	`2`	=> 当页数较多时，两端显示的页数
[options.data.step]	`number`	`5`	=> 每页条数选择步长
[options.data.maxPageSize]	`number`	`50`	=> 最大可设置的每页条数
[options.data.isEllipsis]	`boolean`	`false`	=> 是否展示位总条数+
[options.data.maxTotal]	`number`		=> 总条数超过maxTotal条数时，展示为maxTotal+条数
[options.data.class]	`string`		=> 补充class

select 选择某一页时触发Event

Name	Type	Description
sender	`object`	事件发送对象
current	`object`	当前选择页