https://github.com/llxx-lord-xxll/html-item-pagination
A html element pagination library built using jQuery.
https://github.com/llxx-lord-xxll/html-item-pagination
gallery-template html javascript-library jquery-plugin pagination
Last synced: 3 months ago
JSON representation
A html element pagination library built using jQuery.
- Host: GitHub
- URL: https://github.com/llxx-lord-xxll/html-item-pagination
- Owner: llxx-lord-xxll
- License: mit
- Created: 2019-11-20T11:41:30.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2019-12-06T08:32:44.000Z (almost 6 years ago)
- Last Synced: 2024-11-27T11:37:08.107Z (10 months ago)
- Topics: gallery-template, html, javascript-library, jquery-plugin, pagination
- Language: JavaScript
- Homepage:
- Size: 23.4 KB
- Stars: 7
- Watchers: 1
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- jimsghstars - llxx-lord-xxll/html-item-pagination - A html element pagination library built using jQuery. (JavaScript)
README
# HTML ITEM PAGINATION
A html element pagination library built using jQuery.
Ever wondered a gallery layout with paging system for your HTML Elements ?
We have a jQuery [Datatable](https://datatables.net/) & [Bootstrap Table](https://getbootstrap.com/docs/4.3/content/tables/) for responsive tables with advanced filtering technology.
This library is similar thing like bootstrap responsive grid but with pagination system. There will be items displayed page by page. Pages and Pagination below the element will be automatically created by this library.
So, it's a gallery like layout with paging system. There will be lots of themes and extension coming soon.
First extension developed for HIP.JS , which is [HIP-GALLERY](https://github.com/llxx-lord-xxll/html-item-pagination/tree/master/gallery)
## USAGE
### Link Library
```html
```
### HTML
```html
Content 1
Content 2
Content 3
Content 4
Content 5
Content 6
Content 7
Content 8
Content 9
Content 10
```
```html
$("#html-item-pagination").hip();
```
### Advancing into parameters
Paremeter | Description
------------ | -------------
itemsPerRow | Declares items on each row in the grid layout, Default = 4
itemsPerPage | Declares items displayed in each page, Default = 12
itemGaps | Gap between each items in the grid (Integer in PX), Default = 15
paginationPos | Position of the pagination, (left,center,right), Default = 'center'
itemHeight | Row height for each rows in the grid, Default = 'auto'(flexible)
dynItemsPerRow | This is the part where it can be responsive, Example - dynItemsPerRow: {hs:1,sm:2,md:3,lg:4}
filter | Option to enable/disable filtering
filterPos | Position of the filter input, (left,center,right), Default = 'center'
filterText | Placeholder on filter input
#### dynItemsPerRow Configauration
Defaults are set to original itemsPerRow
Paremeter | Description
------------ | -------------
hs | Applies to this rule when minimum screen width of 480px.
sm | Applies to this rule when minimum screen width of 768px.
md | Applies to this rule when minimum screen width of 992px.
lg | Applies to this rule when minimum screen width of 1200px and up.
The values received as integer, are actually the items on each row in the grid layout at different screen width
## Screenshot
