Simple and fast truncated pagination generator
paginate(31, 100)
// => [1, '...', 30, 31, 32, '...', 100]
npm i @hazmihaz/paginate
or
yarn add @hazmihaz/paginate
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 |
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]
<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>
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>
)
}
}
- Added separator parameter
- Added delta parameter
- Default delta changed from 2 to 1
This library is based on solution by @narthur https://gist.github.com/kottenator/9d936eb3e4e3c3e02598#gistcomment-3413141
MIT