Listjs为筛选后的最后一页生成按钮

Listjs Make button for last page after filter

本文关键字：一页 按钮 最后 筛选 Listjs      更新时间：2023-10-15

list.js问题：

如何创建div，这样当您单击它时，它会显示在我完成过滤器后分页的最后一页。

我有一份清单

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

假设这份清单有20页。在我应用过滤器之后：

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

它现在有5页。我想要一个按钮，当我点击它时，它会把我带到最后一页。

目前，我可以使用以下内容进入未过滤列表的最后一页：

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

但如果我过滤我的列表，点击它，它会试图把我带到第20页，而不是第5页。我该怎么做才能到达筛选列表的最后一页？（第5页）

在你提出问题几年后，我也遇到了同样的问题，所以我正在分享我的解决方案，以防它可能会帮助其他人：

首先我创建第一个和最后一个页面按钮：

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

其次，在js中，我分配list.js生成的分页按钮默认具有的数据属性。

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);
相关文章：