Question

我想将prev / next，first / last按钮添加到我已经分页且有效的索引中。还有其他人使用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>

Answer 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");
    });

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

1 个答案: