https://github.com/alfrcr/paginathing
a jQuery plugin to paginate your DOM easily.
https://github.com/alfrcr/paginathing
dom javascript jquery jquery-plugin paginate pagination
Last synced: 3 months ago
JSON representation
a jQuery plugin to paginate your DOM easily.
- Host: GitHub
- URL: https://github.com/alfrcr/paginathing
- Owner: alfrcr
- License: mit
- Created: 2016-06-19T17:43:27.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2023-04-25T20:57:43.000Z (over 2 years ago)
- Last Synced: 2024-04-14T12:19:43.304Z (over 1 year ago)
- Topics: dom, javascript, jquery, jquery-plugin, paginate, pagination
- Language: JavaScript
- Homepage:
- Size: 83 KB
- Stars: 30
- Watchers: 5
- Forks: 28
- Open Issues: 6
-
Metadata Files:
- Readme: readme.md
- License: LICENSE
Awesome Lists containing this project
README
# Paginathing
#### Paginate Everything (support BootstrapCSS 5)
a dead-simple jQuery plugin for paginate your html elements. [DEMO](https://paginathing.netlify.app)
#### How does the plugin work?
Originally `paginathing.js` hide all your selector's children DOM. Then shows the DOM based on active page by using jQuery .show()
## Requirements
- jQuery
## Usage
Your html markup (example)
```html
List of item.
- Your Item 1
- Your Item 2
- Your Item 3
- Your Item 4
- Your Item 5
- Your Item 6
```
#### Include jQuery & paginathing first
```html
```
#### Initialize
```html
jQuery(document).ready(function ($) {
$(".list-group").paginathing({
perPage: 2,
containerClass: "panel-footer",
});
});
```
## Available Options
```js
{
// show item per page
perPage: 10,
// Limiting your pagination number.
// Value could be boolean or positive integer.
limitPagination: false,
// Enable previous and next button
prevNext: true,
// Enable first and last button
firstLast: true,
// Previous button text
prevText: '«',
// Next button text
nextText: '»',
// "First button" text
firstText: 'First',
// "Last button" text
lastText: 'Last',
// Extend default container class
containerClass: 'pagination-container',
// Extend default
- class
- class
liClass: 'page-item',
// Extend css class
linkClass: 'page-link',
// Active link class
activeClass: 'active',
// disabled link class,
disabledClass: 'disable',
// class or id (eg: .element or #element). append the paginator after certain element
insertAfter: null,
// showing current page number of total pages number, to work properly limitPagination must be true
pageNumbers: false,
}
```## License
paginathing.js is licensed under [MIT](./LICENSE)
ulClass: 'pagination',
// Extend