Your sites Log in Sign up Menu

List all pages of entries in a <select> element

Is there a way to include all pages in a <select> element, so users can choose a specific page rather than clicking "view older posts" over and over?

Thanks for such a wonderful platform.


2 years ago, 1 replies   Improve this question

Yes, but you'll need to use a little JavaScript to generate a dropdown to navigate to a specific page of entries.

Here's one way to accomplish what you describe, you'll need to add this inside the {{#pagination}}... block in your template's entries.html file.

<select id="select_page"></select>
<script>
var select_page = document.getElementById('select_page');
var totalPages = {{total}};
var options = '';
for (var i = 1;i<=totalPages;i++){
  options += '<option value="' + i + '">' + i + '</option>';
}
select_page.innerHTML = options;
select_page.onchange= function(){
  window.location.href = '/page/' + this.value;
};
</script>

Please let me know if you need further guidance implementing this. The main trick is that {{total}} refers to the total number of pages of entries, when it's rendered inside the {{#pagination}}... block.

Answered 2 years ago · Improve this answer