@jdcfe/data-logic

分页器组件

实例化

// 构造新的分页器：总页数，当前页，每页多数据条数
new Pagination(total, current, pageSize)

实例方法

.build(buttons: number): PageNav[]

buttons 表示可视区分页按钮的个数，一般为奇数个（保证两端对称），3、5 等

export interface PageCtrl {
    type: 'prev' | 'next'
    disabled: boolean
}
export interface PageItem {
    type: 'item'
    active: boolean
    page: number
}
export interface PageSep {
    type: 'ellipsis'
    dir: 'head' | 'tail'
}

type PageNav = PageCtrl | PageItem | PageSep

返回结果示例

[
  { type: "prev", disabled: true },
  { type: "item", active: true, page: 1 },
  { type: "item", active: false, page: 2 },
  { type: "item", active: false, page: 3 },
  { type: "next", disabled: false }
]

.print(): string

打印图形化结果，方便调试

let paginate = new Pagination(10, 1, 1)
paginate.print() // '|<|*1*|2|3|4|.|10|>|'

解释：

 ▾prev            ▾next
|<|*1*|2|3|4|.|10|>|
    ▴current ▴ellipsis

详细测试用例

Pagination.test.ts