rd-pagination.js
Version:
The highly customizable JS pagination class.
35 lines (33 loc) • 1.44 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rundiz | Pagination.JS</title>
</head>
<body>
<h1>Basic sample 3 use start offset & different selector</h1>
<div id="content">Content of page 1</div>
<nav id="my-pagination" aria-label="Page navigation example"></nav>
<script src="../../assets/js/rd-pagination.min.js"></script>
<script>
function myFunction(thisTarget, event, options) {
event.preventDefault();
const pageValue = parseInt(thisTarget.dataset.rdPaginationPageValue);
const pageNumberDisplay = (pageValue / options.items_per_page) + 1;
document.getElementById('content').innerText = 'Content of page ' + pageNumberDisplay;
}// myFunction
document.addEventListener('DOMContentLoaded', (event) => {
const rdPagination = new RdPagination('#my-pagination', {
base_url: '?start=%PAGENUMBER%',
page_number_value: 0,
total_records: 195,
events: {
onclick: myFunction,
}
});
rdPagination.createLinks();
});
</script>
</body>
</html>