Radio Input Based Pagination Component - jQuery Simple Pagination

File Size: 21 KB
Views Total: 1514
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Radio Input Based Pagination Component - jQuery Simple Pagination

A simple yet customizable jQuery pagination plugin that generates pagination links on the webpage and uses radio buttons to navigate between pages.

The best part of the plugin is that by clicking the ellipsis you will see a list picker popover containing all collapsed page numbers, which you can quickly choose and access to the desired page.

How to use it:

1. Load the jQuery Simple Pagination plugin's JavaScript and Stylesheet in the HTML page.

<link rel="stylesheet" href="/path/to/dist/css/jquery.simple-pagination.min.css" />
<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/dist/js/jquery.simple-pagination.min.js"></script>

2. Create a placeholder for the pagination component.

<div id="myPagination"></div>

3. Initialize the pagination component and specify the current & max pages.

$('#myPagination').simplePagination({
  current: 3,
  count: 15
});

4. Determine the name of the radio buttons. Default: 'pagination'.

$('#myPagination').simplePagination({
  current: 3,
  count: 15,
  name: 'page'
});

5. You can also have multiple pagination components at a time.

<div id="topPagi"></div>
  ...
<div id="bottomPagi"></div>
('#topPagi').simplePagination({
  current: 7,
  count: 14,
  name: 'pagi',
  mirrorContainer: '#bottomPagi'
});

6. The HTML structure of the pagination components should be like these:

<div id="myPagination">
  <div class="simple-pagination">
    <button class="simple-pagination__button" type="button" data-action="pagination-page" data-page="2">←</button>
    <button class="simple-pagination__button" type="button" data-action="pagination-page" data-page="1">1</button>
    <button class="simple-pagination__button" type="button" data-action="pagination-page" data-page="2">2</button>
    <button class="simple-pagination__button simple-pagination__button--disable" type="button" data-action="pagination-page" data-page="3">3</button>
    <button class="simple-pagination__button" type="button" data-action="pagination-page" data-page="4">4</button>
    <div class="simple-pagination__spred">
      <button class="simple-pagination__button" type="button" data-action="pagination-spred">...</button>
      <div class="simple-pagination__select">
        <div class="simple-pagination-select">
          <div class="simple-pagination-select__item">
            <button class="simple-pagination__button" type="button" data-action="pagination-page" data-page="5">5</button>
          </div>
          <div class="simple-pagination-select__item">
            <button class="simple-pagination__button" type="button" data-action="pagination-page" data-page="6">6</button>
          </div>
          <div class="simple-pagination-select__item">
            <button class="simple-pagination__button" type="button" data-action="pagination-page" data-page="7">7</button>
          </div>
          <div class="simple-pagination-select__item">
            <button class="simple-pagination__button" type="button" data-action="pagination-page" data-page="8">8</button>
          </div>
          <div class="simple-pagination-select__item">
            <button class="simple-pagination__button" type="button" data-action="pagination-page" data-page="9">9</button>
          </div>
        </div>
      </div>
    </div>
    <button class="simple-pagination__button" type="button" data-action="pagination-page" data-page="10">10</button>
    <button class="simple-pagination__button" type="button" data-action="pagination-page" data-page="4">→</button>
  </div>
  <div class="simple-pagination-radio">
    <input type="radio" name="page" value="1">
    <input type="radio" name="page" value="2">
    <input type="radio" name="page" value="3" checked="">
    <input type="radio" name="page" value="4">
    <input type="radio" name="page" value="5">
    <input type="radio" name="page" value="6">
    <input type="radio" name="page" value="7">
    <input type="radio" name="page" value="8">
    <input type="radio" name="page" value="9">
    <input type="radio" name="page" value="10">
  </div>
</div>

7. Return the current page index:

$('#myPagination input[name=page]').change(function() {
  console.log($(this).val());
});

8. Create custom pagination buttons with the following methods.

var myPagi = $('#myPagination').simplePagination({
    // options here
});

// back to prev page
myPagi.setPrevPage();

// go to next page
myPagi.setNextPage();

// go to a specific page
myPagi.setPage(1);

Changelog:

2020-10-30

  • Added setPrevPage, setNextPage and setPage methods.

This awesome jQuery plugin is developed by maximzhurkin. For more Advanced Usages, please check the demo page or visit the official website.