Code Monkey home page Code Monkey logo

pagination-store's Introduction

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 } ]

pagination-store's People

Contributors

bplok20010 avatar dependabot[bot] avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.