An easy to integrate jQuery paginator.
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>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 }); });
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. |
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 |
The MIT License. Copyright (c) 2019 Raed Yak