一个还算实用的分页组件:xy-pagination

javascript/jquery

浏览数:265

2019-9-1

分页组件(有些可能叫做翻页组件)应该是一类比较常见的组件了,适用于数据比较多的情况。比如思否的问答页面:

结构比较简单,通常包括上一页、数字页面、下一页等功能,有些可能还会包含输入指定页码跳转、切换每页条数功能。

xy-pagination

xy-paginationxy-ui新增了一类组件,主要解决分页问题,下面简单介绍一下主要属性和方法,建议阅读在线文档,可以实时交互。

一个<xy-pagination></xy-pagination>标签就做出一个还算不错的分页功能

使用方式

使用方式很简单

  • npm
npm i xy-ui
  • cdn
<script type="module" src="https://unpkg.com/xy-ui/components/xy-pagination.js"></script>

<!--或者-->

<script type="module">
    import 'https://unpkg.com/xy-ui/components/xy-pagination.js'
</script>
  • 或者直接从github拷贝源码。
<script type="module" src='./node_modules/xy-ui/components/xy-pagination.js'></script>
<!--或者-->
<script type="module">
    import './node_modules/xy-ui/components/xy-pagination.js';
</script>

支持键盘左右键向前一页和向后一页。

使用

<xy-pagination pagesize="3" total="50"></xy-pagination>

属性

数据总数total、每页条数pagesize

设置或返回分页组件的数据总数和每页条数。

<xy-pagination pagesize="3" total="50">

总页数为:50/3 向上取整

JavaScript操作getset

pagination.pagesize; //获取
pagination.pagesize = 5;
pagination.total;
pagination.total = 100;
//原生属性操作
pagination.getAttribute('pagesize');
pagination.getAttribute('total');
pagination.setAttribute('pagesize',5);
pagination.setAttribute('total',100);

当页数较少时(不超过10页),则完整显示

<xy-pagination pagesize="3" total="20"></xy-pagination>

默认值defaultcurrent

可以给分页指定一个初始值defaultcurrent,默认为1

<xy-pagination defaultcurrent="7" pagesize="3" total="50"></xy-pagination>

JavaScript操作getset

pagination.current; //获取
pagination.current = 2;
//原生属性操作
pagination.getAttribute('current');
pagination.setAttribute('current',2);

如果设置的值超过最大页数,会取最大页数,比如上述最大页数是
17,设置
pagination.current=100,则实际会设置为
17

简约模式simple

可以添加simple属性,只展示当前页和总页数。

<xy-pagination simple pagesize="3" total="50"></xy-pagination>

事件

onchange

页码改变的回调,支持一下三种绑定方式。

<xy-pagination  onchange="XyMessage.info('当前页: '+this.current)" pagesize="3" total="50"></xy-pagination>
pagination.onchange = function(ev){
    //获取参数的几种方式
    /*
    event:{
        detail:{
            current,
            pagesize,
            total,
        }
    }
    */
    console.log(this.current);
    console.log(ev.target.current);
    console.log(ev.detail.current);
}

pagination.addEventListener('change',function(ev){
    console.log(this.current);
    console.log(ev.target.current);
    console.log(ev.detail.current);
})

实例

实际过程中可能有更复杂的场景,比如文章开头说的跳转功能,我们可以配合xy-selectxy-input实现。

<div class="pagination-demo">
    <xy-pagination id="pagination-demo" onchange="XyMessage.info('当前页: '+this.current)" pagesize="10" total="200"></xy-pagination>
    <xy-select defalutvalue="10" onchange="document.getElementById('pagination-demo').pagesize=this.value">
        <xy-option value="10">每页10条</xy-option>
        <xy-option value="15">每页15条</xy-option>
        <xy-option value="20">每页20条</xy-option>
    </xy-select>
    <span>跳转</span><xy-input type="number" defalutvalue="1" min="1" onchange="document.getElementById('pagination-demo').current = this.value"></xy-input><span>页</span>
</div>

效果如文章开头所示,可预览codepen demo

小节

xy-pagination使用很简单,就两三个属性,一个回调方法,希望有需要的小伙伴可以马上用起来,也希望可前往github给颗star,谢谢~

对了,接下来的计划是准备做一个日期选择器(用了那么多好像还从来没手写一个),貌似有些复杂,估计会花费稍久一点的时间,请耐心等待~

作者:XboxYan