Skip to content

Instantly share code, notes, and snippets.

@GudarJs
Last active November 14, 2017 02:54
Show Gist options
  • Save GudarJs/6c3ece4b92fa6b9e42218a95ca289f7b to your computer and use it in GitHub Desktop.
Save GudarJs/6c3ece4b92fa6b9e42218a95ca289f7b to your computer and use it in GitHub Desktop.
GhostJS Numbered Pagination
<div class="row" style="display: none;">
<ul id="pagination-list" class="pagination col s12 m8 offset-m2" role="navigation" style="display: flex; justify-content: center;">
</ul>
<div id="page-total" style="display:none;">{{pages}}</div>
<div id="page-current" style="display:none;">{{page}}</div>
</div>
<script>
var limit = 5;
var pageTotal = document.getElementById('page-total').innerHTML;
var pageCurrent = parseInt(document.getElementById('page-current').innerHTML);
var nav = document.getElementById('pagination-list');
var olderClass = 'class="waves-effect"';
var newerClass = 'class="waves-effect"';
if (pageCurrent == 1) {
olderClass = 'class="disabled"';
}
if (pageCurrent == pageTotal) {
newerClass = 'class="disabled"';
}
var older = '<li ' + olderClass + '><a href="/page/' + (pageCurrent - 1).toString() + '"><i class="material-icons" style="padding: 0.5rem;">chevron_left</i></a></li>';
var newer = '<li ' + newerClass + '><a href="/page/' + (pageCurrent + 1).toString() + '"><i class="material-icons" style="padding: 0.5rem;">chevron_right</i></a></li>';
var first = '<li ' + olderClass + '><a href="/page/1" style="padding:0;"><i class="material-icons" style="padding: 0.5rem; margin-right: -4rem;">chevron_left</i><i class="material-icons" style="padding: 0.5rem;">chevron_left</i></a></li>';
var last = '<li ' + newerClass + '><a href="/page/' + pageTotal.toString() + '" style="padding:0;"><i class="material-icons" style="padding: 0.5rem;">chevron_right</i><i class="material-icons" style="padding: 0.5rem; margin-left: -4rem">chevron_right</i></a></li>';
var pagination = first + older;
var firstPage = 0;
if ((pageTotal - limit) > 0) {
if (pageCurrent > (pageTotal - limit) && pageCurrent <= pageTotal)
{
firstPage = (pageTotal - limit)
}
}
for (i = firstPage + 1; i <= pageTotal; i++) {
var margin = 'style="margin-left: 0.5rem;"'
if (i > firstPage + limit) {
break;
}
if (i == 1) { margin = '' }
// If you are on the current page, do not link
if (i == pageCurrent) {
pagination = pagination + '<li class="active cyan darken-2 grey-text text-lighten-5" ' + margin + '><a href="">' + i +'</a></li>';
} else {
// Otherwise, add a link to the page
pagination = pagination + '<li class="waves-effect grey lighten-5 cyan-text text-darken-2" ' + margin + '><a href="/page/' + i + '"> ' + i + '</a></li>';
}
}
pagination = pagination + newer + last;
if (pageTotal > 1) {
nav.parentNode.style.display = "block";
nav.innerHTML = pagination;
}
</script>
@GudarJs
Copy link
Author

GudarJs commented Nov 14, 2017

Based on: https://www.ghostforbeginners.com/add-numbered-pagination-to-ghost/

Example

Pagination example

Prerequisites

  • Materialize CSS

Configuration

Change post per page

Add to package.json

"config": {
  "posts_per_page": 1
}

Change how many labels display on pagination

Change on pagination.hbs

<script>
  var limit = 5;
  ...
</script>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment