Senzill-Pagination
An easy to integrate jQuery paginator.
Installation
You can install senzill-pagination using one of the following methods:
- Download: Download/Clone the senzill-pagination source code and add
senzill-pagination.jsto your<head/>tag
<head> <link rel="stylesheet" type="text/css" href="bootstrap4.css"> <script src="jquery.js"></script> <script src="senzill-pagination.js"></script> </head>- NPM:
npm install --save senzill-pagination- jsDelivr CDN:
<head> <link rel="stylesheet" type="text/css" href="bootstrap4.css"> <script src="jquery.js"></script> <script src="https://cdn.jsdelivr.net/gh/yak0d3/[email protected]/senzill-pagination.js"></script> </head>Usage
To start using senzill-pagination you have to follow simple steps to get your frontend pagination ready.
-
Add the panel's
<div/>on top of your content's wrapper<div id="sen-panel"></div> -
Add the navigation-bar's
</div>under your content's wrapper<div id="sen-nav"></div> -
Start the pagination with jQuery:
$(function(){ $('#wrapper_id').senzill({ nav: '#sen-nav', //The navbar id panel: '#sen-panel', //The panel id }); });
Parameters
The table displayed below explains all of the available parameters.
| Parameter | Required | Default | Description |
|---|---|---|---|
elPerPage | No | 4 | [Integer] The number of elements to display per page. |
nav | Yes | null | [String] The navigation bar id.Note: You have to create a div for the navbar and pass it as the nav parameter. |
panel | No | null | [String] The panel id.Note: You have to create a div for the panel and pass it as the panel parameter. |
nums | No | true | [Boolean] Specifies whether to show a numbered navigation or not. |
showOptions | No | [5, 10, 15, 20, 30] | [Array] The options to display inside the panel's <select/> Note: If the elPerPage value is not in this array, it will be added automatically. |
Methods
The following table describes the list of available methods.
| Method | Description |
|---|---|
elemLimit(int number) | Sets the number of elements to display per page |
destroy() | Destroys the senzill-pagination instance. |
reload() | reloads the senzill-pagination instance. |
setPage(int pageNumber) | Destroys the senzill-pagination instance. |
getPage() | Returns the current page number |
License
The MIT License. Copyright (c) 2019 Raed Yak
