@hazmihaz/paginate NPM

paginate

Simple and fast truncated pagination generator

shield shield shield

Usage

paginate(31, 100)
// => [1, '...', 30, 31, 32, '...', 100]

Installation

npm i @hazmihaz/paginate

yarn add @hazmihaz/paginate

Params

Param	Type	Default	Description
current	Number	undefined	Current page
total	Number	undefined	Total pages
delta	Number	1	Number of pages before and after current page
separator	String	"..."	Separator

Examples

import paginate from 'paginate'

const pagination = paginate(30, 100, 2, '_')
// => [1, '_', 28, 29, 30, 31, 32, '_', 100]

paginate(1, 100)
// => [1, 2, 3, '...', 100]

paginate(10, 100, 2, '🐍')
// => [1, '🐍', 8, 9, 10, 11, 12, '🐍', 100]

paginate(5, 50, 3)
// => [1, 2, 3, 4, 5, 6, 7, 8, '...', 50]

Vue Example

<template>
  <ul>
    <li
      v-for="(page, i) in paging"
      :key="i"
      :class="{ disabled: page === '_' }"
    >
      {{ page }}
    </li>
  </ul>
</template>

<script>
import paginate from '@hazmihaz/paginate'

const makePaging = (current, total) => {
  return paginate(current, total, 2, '_')
}

export default {
  computed: {
    paging() {
      return makePaging(10, 60)
    },
  },
}
</script>

React Example

import React from 'react'
import paginate from '@hazmihaz/paginate'

class Page extends React.Component {
  render() {
    const Paging = paginate(10, 50).map(el => (
      <li>{el}</li>
    ))

    return (
      <div>
        <ul>
        {Paging}
        </ul>
      </div>
    )
  }
}