/pagination-store

pagination-store

Primary LanguageJavaScriptMIT LicenseMIT

pagination-store

生成 pagination 数据对象

安装

npm install --save pagination-store

types

interface PaginationOptions {
	total: number;
	current?: number;
	pageSize?: number;
	pageRange?: number;
}

interface PData {
	page: number | null;
	isCurrent?: boolean;
	isPreviousMore?: boolean;
	isNextMore?: boolean;
}

PaginationStore

构造函数

new PaginationStore({ total: 100, current: 1, pageSize: 10, pageRange: 5 }) 或 getPageList({ total: 100, current: 1, pageSize: 10, pageRange: 5 }): PData[]

属性

  • total 总数
  • current 当前页 默认为 1
  • pageSize 页码大小 默认为 10
  • pageRange 分页按钮显示的最大数 默认为 5

方法

  • getCurrentList(): PData[] 获取当前分页的列表。

    该方法接收一个函数作为结果項进行处理

  • getPageTotal() 获取页面总数

  • isFirstPage(number) 判断是否第一页

  • isLastPage(number) 作用同上

  • getNext() 获取下一页的页码，如果不存在则返回 null

  • getPrevious() 作用同上

  • previous() 翻页，上一页，如果失败则返回 false

  • next() 翻页，下一页，如果失败则返回 false

getPageList

eg: getPageList({ total: 100, current: 1, pageSize: 10, pageRange: 5 })

示例

import { PaginationStore, getPageList } from "pagination-store";

const pagination = new PaginationStore({
	total: 161,
	pageSize: 10,
	pageRange: 5,
});

console.log(pagination.getCurrentList());

pagination.current = 8;

console.log(pagination.getCurrentList());

pagination.next();

console.log(pagination.getCurrentList());
//getCurrentList() 返回示例
[ { page: 1, isCurrent: false },
  { page: null, isPreviousMore: true },
  { page: 7, isCurrent: false },
  { page: 8, isCurrent: false },
  { page: 9, isCurrent: true },
  { page: 10, isCurrent: false },
  { page: 11, isCurrent: false },
  { page: null, isNextMore: true },
  { page: 17, isCurrent: false } ]