Listjs Make button for last page after filter

Question

list.js Question:

How do you create a div so when you click it, it shows the last page of the pagination, after I have done a filter.

I have a list

var List = new List('list', {
    valueNames: ['name'],
    page: 5,
    plugins: [ListPagination({})]
});

And say this list has 20 pages. After I apply a filter:

List.filter(function(item) {
    if (item.values().category.toLowerCase().indexOf('wordtofilter') > -1) {
         return true;
    } else {
         return false;
    }
});

It now has 5 pages. I want to have a button when I click it will take me to the last page.

Currently I can get to the last page of an unfiltered list using this:

$('.go-to-last-page').on('click', function(){
    List.show(List.size(), 5);
});

But If i filter my list, and click it, it will attempt to take me to page 20, instead of 5. How do I make it so it takes me to the last page of the filtered list? (page 5)

Answer 1

I had this same problem a few years after your question, so I'm sharing my solution in case it might help someone else:

First I create the first and last page buttons:

<nav>
  <button id="btn-first">FIRST</button>
  <ul class="pagination"></ul>
  <button id="btn-last">LAST</button>
</nav>

Secondly, in js I assign the data attributes that the paging buttons generated by list.js have by default.

const LIST_PAGINATION = 10;
var btn_first = document.getElementById('btn-first');
var btn_last = document.getElementById('btn-last');

btn_first.addEventListener("click",function(e){
    btn_first.dataset.i = 1;
    btn_first.dataset.page = LIST_PAGINATION;
 },false);

btn_last.addEventListener("click",function(e){
    let total = list.matchingItems.length; // list.js object in my case I called it "list"
    let page = Math.ceil(total / LIST_PAGINATION);
    btn_last.dataset.i = page;
    btn_last.dataset.page = LIST_PAGINATION;
 },false);