Add Customizable Pagination to Any Content with the pure-paginator JS Library

Preview:

Description:

pure-paginator is a simple, customizable JavaScript pagination solution that lets you easily paginate any content (like tables, lists, DIVs, etc) on your pages.

How to use it:

1. Install with NPM.

# NPM
$ npm i pure-paginator

2. Import the pure-paginator into your project.

// ES
import { Pagination } from 'pure-paginator';
// RequireJS
const { Pagination } = require('pure-paginator');
// Browser
<script src="/dist/pure-paginator.js"></script>

3. Create an empty DIV to hold the pagination controls.

<div class="pagination-wrapper">
</div>

4. Initialize the pure-paginator and pass the following parameters:

• parentElement: The element holds your long content
• paginationElement: The element contains the pagination controls
• firstSite: Determine which page should be displayed on init, default “1”
• rowsPerPage: Specify the number of rows to display per page, default “10”

const pagination = new Pagination(
  document.querySelector(.your-element),
  document.querySelector(.pagination-wrapper),
  1,
  10
);

5. Apply your own styles to the pagination controls.

.pagination-wrapper {
  /* your styles here */
}
.pagination-wrapper {
  /* your styles here */
}
.pagination-wrapper .pagination-site-number-wrapper {
  /* your styles here */
}
.pagination-wrapper button, .pagination-placeholder {
  /* your styles here */
}
.pagination-wrapper button.active, button:hover {
  /* your styles here */
}
.pagination-wrapper button.active {
  /* your styles here */
}

6. Regenerate the pagination controls.

pagination.reindexPagination(containsClass);

Changelog:

v1.0.3 (11/18/2023)

• Rebuild