How to make use of it:

1. Load the jQuery Simple Pagination plugin’s JavaScript and Stylesheet within the HTML web 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 element.

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

3. Initialize the pagination element and specify the present & max pages.

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

4. Determine the identity of the radio buttons.

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

5. You may have a number of pagination elements 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 elements needs to 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 class="simple-pagination-select__item">
            <button class="simple-pagination__button" type="button" data-action="pagination-page" data-page="10">10</button>
          </div>
          <div class="simple-pagination-select__item">
            <button class="simple-pagination__button" type="button" data-action="pagination-page" data-page="11">11</button>
          </div>
          <div class="simple-pagination-select__item">
            <button class="simple-pagination__button" type="button" data-action="pagination-page" data-page="12">12</button>
          </div>
          <div class="simple-pagination-select__item">
            <button class="simple-pagination__button" type="button" data-action="pagination-page" data-page="13">13</button>
          </div>
        </div>
      </div>
    </div>
    <button class="simple-pagination__button" type="button" data-action="pagination-page" data-page="14">14</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">
    <input type="radio" name="page" value="11">
    <input type="radio" name="page" value="12">
    <input type="radio" name="page" value="13">
    <input type="radio" name="page" value="14">
  </div>
</div>

7. Return the present web page index:

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

Radio Input Based Pagination Component, jQuery Simple Pagination Plugin/Github

See Demo And Download