Universal Content Pagination System In Pure JavaScript – purePajinate

purePajinate is a Vanilla JavaScript library that makes it easy to generate pagination controls for long block elements like cards, images, lists, etc.

How to use it:

1. Load the purePajinate’s JavaScript in your HTML document.

<script src="js/purePajinate.es5.min.js"></script>

2. Insert a group of elements together with the pagination container to your page.

<div class="example">
  <div class="items">
    <div class="item item1">
      <div class="title">Slide 1</div>
    </div>
    <div class="item item2">
      <div class="title">Slide 2</div>
    </div>
    <div class="item item3">
      <div class="title">Slide 3</div>
    </div>
    <div class="item item4">
      <div class="title">Slide 4</div>
    </div>
    <div class="item item5">
      <div class="title">Slide 5</div>
    </div>
    <div class="item item6">
      <div class="title">Slide 6</div>
    </div>
  </div>
  <div class="page_navigation"></div>
</div>

3. Initialize the pagination library on the parent container and determine how many items per page (default: 10).

var myPagination = new purePajinate({
    itemsPerPage: 5
});

4. Apply your own CSS styles to the pagination controls.

.page_navigation { 
  /* your styles here */
}
.page_navigation ul { 
  /* your styles here */
}
.page_navigation li { 
  /* your styles here */
}
.page_navigation li.active_page { 
  /* your styles here */
}

5. Determine whether to navigate to the first page when you click the Next button on the last page. Default: false.

new purePajinate({
    wrapAround: true
});

6. Specify the number of pagination links to display. Default: 10.

new purePajinate({
    pageLinksToDisplay: 5
});

7. Set the initial page on page load. Default: 0 (page 1).

new purePajinate({
    startPage: 1
});

8. Determine whether to hide the pagination on small devices. Default: false.

new purePajinate({
    hideOnSmall: true
});

9. Customize the pagination controls with the following options.

new purePajinate({
    navLabelFirst: 'First',
    navLabelPrev: 'Prev',
    navLabelNext: 'Next',
    navLabelLast: 'Last',
    navOrder: ["first", "prev", "num", "next", "last"],
    showFirstLast: false,
    showPrevNext: true
});

10. Default selectors and classes.

new purePajinate({
    containerSelector: '.items',
    itemSelector: '.item',
    navigationSelector: '.page_navigation',
    defaultClass: '',
    activeClass: "active",
    disabledClass: "disabled"
});

11. Callback functions.

new purePajinate({
    onInit: function onInit() { },
    onPageDisplayed: function onPageDisplayed() { }
});

Changelog:

08/24/2021

• v1.0.2