Skip to content

Latest commit

 

History

History
86 lines (58 loc) · 3.45 KB

README.md

File metadata and controls

86 lines (58 loc) · 3.45 KB
Raw

Senzill-Pagination

GitHub tag (latest SemVer pre-release)

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.js to 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.

  1. Add the panel's <div/> on top of your content's wrapper <div id="sen-panel"></div>

  2. Add the navigation-bar's </div> under your content's wrapper <div id="sen-nav"></div>

  3. 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