分页生成器 [WIP]

当数据量过多时，使用分页生成器动态分解数据。

综合用法

html

<div id="pagerExample1"></div>
<div id="pagerExample2"></div>
<div id="pagerExample3"></div>

<script>
    new zui.Pager('#pagerExample1', {
        items: [
            {type: 'info', text: '共 {recTotal} 项'},
            {type: 'size-menu', text: '每页 {recPerPage} 项', dropdown: {placement: 'top'}},
            {type: 'link', page: 'first', icon: 'icon-double-angle-left', hint: '第一页'},
            {type: 'link', page: 'prev', icon: 'icon-angle-left', hint: '上一页'},
            {type: 'info', text: '{page}/{pageTotal}'},
            {type: 'link', page: 'next', icon: 'icon-angle-right', hint: '下一页'},
            {type: 'link', page: 'last', icon: 'icon-double-angle-right', hint: '最后一页'},
        ],
        page: 2,
        recTotal: 101,
        recPerPage: 10,
        linkCreator: '#?page={page}&recPerPage={recPerPage}',
        onClickItem: (info) => {
            console.log('> pagerExample1.onClickItem', info);
        },
    });
    new zui.Pager('#pagerExample2', {
        items: [
            {type: 'info', text: '共 {recTotal} 项'},
            {type: 'size-menu', text: '每页 {recPerPage} 项', dropdown: {placement: 'top'}},
            {type: 'link', page: 'first', icon: 'icon-double-angle-left', hint: '第一页'},
            {type: 'link', page: 'prev', icon: 'icon-angle-left', hint: '上一页'},
            {type: 'nav', count: 6},
            {type: 'link', page: 'next', icon: 'icon-angle-right', hint: '下一页'},
            {type: 'link', page: 'last', icon: 'icon-double-angle-right', hint: '最后一页'},
            {type: 'goto', text: '跳转'},
        ],
        page: 2,
        recTotal: 51,
        recPerPage: 10,
        linkCreator: '#?page={page}&recPerPage={recPerPage}',
        onClickItem: (info) => {
            if (info.item.type !== 'nav') {
                return;
            }
            const fElement = info.event.target.closest('.pager');
            const btns = fElement.querySelectorAll('.pager-nav');
            btns.forEach(element => {
                element.classList.remove('active');
            });
            info.event.target.classList.add('active');
        },
    });
    new zui.Pager('#pagerExample3', {
        items: [
            {type: 'info', text: '共 {recTotal} 项'},
            {type: 'link', page: 'prev', icon: 'icon-angle-left', hint: '上一页'},
            {type: 'nav'},
            {type: 'link', page: 'next', icon: 'icon-angle-right', hint: '下一页'},
        ],
        page: 2,
        recTotal: 51,
        recPerPage: 10,
        linkCreator: '#?page={page}&recPerPage={recPerPage}',
        onClickItem: (info) => {
            if (info.item.type !== 'nav') {
                return;
            }
            const fElement = info.event.target.closest('.pager');
            const classList = ['text-canvas', 'bg-primary'];
            const btns = fElement.querySelectorAll('.pager-nav');
            btns.forEach(element => {
                element.classList.remove(...classList);
            });
            info.event.target.classList.add(...classList);
        },
    });

</script>

简单分页

大于 6 页时的效果：

html

<div id="pagerAllCount"></div>
<div id="pagerMaxCount"></div>

<script>
    new zui.Pager('#pagerAllCount', {
        items: [
            {type: 'link', page: 'prev', icon: 'icon-angle-left', hint: '上一页'},
            {type: 'nav'},
            // ...
            onClickItem: (info) => {
                if (info.item.type !== 'nav') {
                    return;
                }
                const fElement = info.event.target.closest('.pager');
                const btns = fElement.querySelectorAll('.pager-nav');
                btns.forEach(element => {
                    element.classList.remove('active');
                });
                info.event.target.classList.add('active');
            },
        ],
        // ...
    });
    new zui.Pager('#pagerMaxCount', {
        items: [
            {type: 'link', page: 'prev', icon: 'icon-angle-left', hint: '上一页'},
            {type: 'nav', count: 6},
            // ...
        ],
        // ...
    });
</script>

跳转到

html

<div id="pagerGoto"></div>

<script>
    new zui.Pager('#pagerGoto', {
        items: [
            {type: 'link', page: 'prev', icon: 'icon-angle-left', hint: '上一页'},
            {type: 'info', text: '{page}/{pageTotal}'},
            {type: 'link', page: 'next', icon: 'icon-angle-right', hint: '下一页'},
            {type: 'goto', text: '跳转'},
        ],
        page: 2,
        recTotal: 101,
        recPerPage: 10,
        linkCreator: '#?page={page}&recPerPage={recPerPage}',
        onClickItem: (info) => {
            console.log(info);
        },
    });
</script>

外观

结合CSS工具类实现不同类型的分页外观

html

<script>
    new zui.Pager('#pagerNav1', {
        btnProps: {btnType: 'border'},
        // ...
        onClickItem: (info) => {
            if (info.item.type !== 'nav') {
                return;
            }
            const fElement = info.event.target.closest('.pager');
            const btns = fElement.querySelectorAll('.pager-nav');
            btns.forEach(element => {
                element.classList.remove('active');
            });
            info.event.target.classList.add('active');
        },
    });
</script>

引入

通过npm

import {Pager} from 'zui/pager';
const contextMenu = new Pager(element, options);

通过全局对象

const pager = new zui.Pager(element, options);

使用React 组件

import {render} from 'react';
import {Pager} from 'zui/pager/react';

render(element, <Pager {...options} />);

使用Jquery 扩展

$(element).pager(options);

const pager = $(element).data('zui.pager');

选项

`linkCreator`

导航链接生成器，点击页码时进行页面地址更换。

类型：string | ((info: PagerInfo) => string)
必选：否

`page`

初始状态的当前页码。

类型：number。

`recTotal`

总记录数目。

类型：number。

`recPerPage`

每页记录数。

类型：number。

`pageTotal`

总页数。

类型：number。

`items`

定义分页项的列表，可以通过一个函数动态返回分页组件。

基于工具栏选项和自定义 PagerItemOptions 选项。

`onClickItem`

指定分页按钮的点击回调事件。

API

`PagerInfo`

参数：

`page`

含义：初始状态的当前页码；
类型：number。

`recTotal`

含义：总记录数目；
类型：number。

`recPerPage`

含义：每页记录数；
类型：number。

`pageTotal`

含义：总页数；
类型：number。

`PagerItemOptions`

参数：

`type`

含义：子项类型；
类型：string；
可选项：info | link | nav | size-menu | goto。

`page`

含义：页码名称；
类型：'first' | 'last' | 'prev' | 'next' | 'current' | number。

`text`

含义：指定类型为 info | size-menu 的显示文案；
类型：string | ((info: PagerInfo) => string)。

`count`

含义：指定类型为 nav 的展示数量；
类型：number。

`format`

含义：指定类型为 link | nav 的显示格式；
类型：string | ((info: PagerInfo) => string)。

`dropdown`

含义：指定下拉菜单的属性；
类型：object。

`items`

含义：指定类型为 size-menu 下拉菜单里的选项；
类型：number[]。

分页生成器 [WIP] ​

综合用法 ​

简单分页 ​

跳转到 ​

外观 ​

引入 ​

通过npm ​

通过全局对象 ​

使用React 组件 ​

使用Jquery 扩展 ​

选项 ​

linkCreator ​

page ​

recTotal ​

recPerPage ​

pageTotal ​

items ​

onClickItem ​

API ​

PagerInfo ​

page ​

recTotal ​

recPerPage ​

pageTotal ​

PagerItemOptions ​

type ​

page ​

text ​

count ​

format ​

dropdown ​

items ​

分页生成器 [WIP]

综合用法

简单分页

跳转到

外观

引入

通过npm

通过全局对象

使用React 组件

使用Jquery 扩展

选项

`linkCreator`

`page`

`recTotal`

`recPerPage`

`pageTotal`

`items`

`onClickItem`

API

`PagerInfo`

`page`

`recTotal`

`recPerPage`

`pageTotal`

`PagerItemOptions`

`type`

`page`

`text`

`count`

`format`

`dropdown`

`items`