2.1.0 • Published 6 years ago

senzill-pagination v2.1.0

Weekly downloads
6
License
MIT
Repository
github
Last release
6 years ago

Senzill-Pagination

npm.io GitHub tag (latest SemVer pre-release) npm.io npm.io

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/senzill-pagination@2.1.0/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.

ParameterRequiredDefaultDescription
elPerPageNo4[Integer] The number of elements to display per page.
navYesnull[String] The navigation bar id.Note: You have to create a div for the navbar and pass it as the nav parameter.
panelNonull[String] The panel id.Note: You have to create a div for the panel and pass it as the panel parameter.
numsNotrue[Boolean] Specifies whether to show a numbered navigation or not.
showOptionsNo[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.

MethodDescription
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