如何获得上一个/下一个 |使用 list.js 分页的第一个/最后一个按钮答案

【问题标题】：How to get a prev/next | first/last button to work with list.js pagination如何获得上一个/下一个 |使用 list.js 分页的第一个/最后一个按钮
【发布时间】：2019-05-19 22:26:59
【问题描述】：

我想将上一个/下一个、第一个/最后一个按钮添加到我已经分页和工作的索引中。有其他人使用 List.js 创建过这些按钮吗？

<script src='//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js'></script>
<script src='//cdnjs.cloudflare.com/ajax/libs/list.js/1.1.1/list.min.js'></script>
<script src='//cdnjs.cloudflare.com/ajax/libs/list.pagination.js/0.1.1/list.pagination.min.js'></script>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>

<div class="nav">
  <ul class="pagination"></ul>
</div>
<script>
  $(document).ready(function() {
    var options = {
      valueNames: ['prmodel', 'prcolor', 'prcapacity', 'prstorefilter'],
      page: 10,
      plugins: [ListPagination({})]
    };
  });
</script>

【问题讨论】：

有趣的是，我已经构建了一个分页工具作为我的库的一部分...随时查看...这是link。
感谢您的回复，干得好，BRAVooo.. 但它对我不起作用，再次感谢您的帮助
您的数据到底是什么样的？ ... 很难说最好的解决方案是什么，因为您提供的只是很少的 HTML 和 JavaScript。

标签： javascript jquery html css list.js

【解决方案1】：

不确定这是否仍然相关，但这是我实现的。 'paginationCenter' 显示了我在 PaginationClass = "paginationCenter" 中定义的实际页码。您还需要将“上一个按钮”设置为在页面加载时隐藏。 perPage 作为页面选项的一部分传入：perPage。

var perPage = 10;
var myList = new List('myList', options)
      .on("updated", function(list) {
          var current_page = Math.ceil(list.i/perPage);
          var total_pages = Math.ceil(list.matchingItems.length/perPage);
          
          if (total_pages > 1){
            $(".paginationCenter").show(true);
            switch(current_page) {
              case 1:
                $(".page-previous").hide(true);
                $(".page-next").show(true);
                break;
              case total_pages:
                $(".page-next").hide(true);
                $(".page-previous").show(true);
                break;
              default:
                $(".page-previous").show(true);
                $(".page-next").show(true);
                break;
            }
          } else {
            $(".paginationCenter").hide(true);
            $(".page-previous").hide(true);
            $(".page-next").hide(true);
          }
      });

// Trigger the previous / next page if the <- PREVIOUS or NEXT -> buttons are clicked
    $("ul.list-pagination-prev").click(function() {
      $(".paginationCenter .active").prev().trigger("click");
    });
    
    $("ul.list-pagination-next").click(function() {
      $(".paginationCenter .active").next().trigger("click");
    });

【讨论】：