pagination-ui-less

Pagination-UI-LESS

How to use

• use npm or yarn to install

  npm i pagination-ui-less
  

  or

  yarn add pagination-ui-less
  

• use CDN include

  <script src="https://cdn.jsdelivr.net/npm/pagination-ui-less"></script>
  

  then you can use the following example to create a Pagination manager:

  const pagination = paginationUiLess({
      pagesLength: 1,
      currentPage: 1,
      onChange: () => {}
  })
  

types

export declare type TCreatePaginationProps = {
    pagesLength: number;
    onChange: (pages: TPages) => void;
    currentPage?: number;
};

export declare type TPages = {
    currentPage: number;
    pages: {
        action: string | null;
        value: number | string;
        isActive?: boolean;
    }[];
};

Methods

• setPage

  (n: number) => TPages;

• setPagesLength

  (newPagesLength: number, newCurrentPage: number) => TPages

• getPages

  () => TPages

• getCurrentPage

  () => number

• nextPage

  () => TPages

• previousPage

  () => TPages

• firstPage

  () => TPages

• lastPage

  () => TPages

Example

https://github.com/SidStraw/Pagination-UI-LESS/blob/main/example/main.js

import { createPaginationItem } from './module/createElements.js'

async function main() {
  const paginationElement = document.querySelector('#pagination')

  // declare type TCreatePaginationProps = {
  //   pagesLength: number;
  //   onChange: (pages: TPages) => void;
  //   currentPage?: number;
  // };
  const pagination = paginationUiLess({
    pagesLength: 10,
    onChange: updateElements,
  })

  function updateElements({ currentPage, pages }) {
    // declare type TPages = {
    //   currentPage: number;
    //   pages: {
    //      action: string | null;
    //      value: number | string;
    //      isActive?: boolean;
    //   }[];
    // };
    paginationElement.innerHTML = pages.map(createPaginationItem).join('')
  }

  paginationElement.addEventListener('click', e => {
    const { action, value } = e.target.dataset
    const newPage = Number(value)
    const currentPage = pagination.getCurrentPage()

    if (!action || currentPage === newPage) return

    pagination[action](newPage)
  })

  updateElements(1)
}

main()