listjs分页显示所有

Question

在listjs分页中是否有可能有一个显示表中所有可用的按钮，而您仍然有可能自己滚动这些页面。

http://listjs.com/examples/pagination/

因此，例如，配置如下：

page: 50,

它将开始显示每页50个条目，但我希望能够有一个按钮或下拉，我可以选择显示所有允许人们出口csv从所有的东西，而不是仅仅50次。

Answer 1

如果我正确理解你的问题，我会怎么做：

  <div id="test-list">
    <span> Search in the list : </span>
    <input type="text" class="search" />
    <ul class="list">
      <li><p class="name">Guybrush Threepwood</p></li>
      <li><p class="name">Elaine Marley</p></li>
      <li><p class="name">LeChuck</p></li>
      <li><p class="name">Stan</p></li>
      <li><p class="name">Voodoo Lady</p></li>
      <li><p class="name">Herman Toothrot</p></li>
      <li><p class="name">Meathook</p></li>
      <li><p class="name">Carla</p></li>
      <li><p class="name">Otis</p></li>
      <li><p class="name">Rapp Scallion</p></li>
      <li><p class="name">Rum Rogers Sr.</p></li>
      <li><p class="name">Men of Low Moral Fiber</p></li>
      <li><p class="name">Murray</p></li>
      <li><p class="name">Cannibals</p></li>
    </ul>
    <ul class="pagination"></ul>
</div>

<div class="here"> 
  <p> Change the number of items per page : </p>
  <select class="pagination-example">
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>6</option>
  </select> <br/><br/>
  <button class="btn">
    show all items
  </button>
</div>

JS

var list = new List('test-list', {
  valueNames: ['name'],
  page: 3,
  pagination: true
});

$('.pagination-example').on('change', function(){
 let numberOfItems = $('.pagination-example option:selected').text();
  list.page = numberOfItems;
  list.update();
});

$('.btn').on('click', function(){
  list.page = list.size();
  list.update();
})

CSS

.pagination li {
  display:inline-block;
  padding:5px;
}

.list li{
  list-style: square;
}

.here{
  font-size: 20px;
  padding: 10px;
  border: 1px solid green;
}

select{
 width: 100px;
  padding: 10px;
  text-align: center;
}

#test-list{
  padding: 10px;
  border: 1px solid grey;
  margin-bottom: 10px;
}

您应该参考文档，在这些文档中可以找到许多好的信息，比如list.update()或list.size()方法。

这是笔：https://codepen.io/anon/pen/vrdqZr