listjs分页下拉显示全部

Question

listjs 分页是否有可能有一个按钮显示 table 中的所有可用内容，同时您仍然可以自己滚动页面。

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

所以例如配置如下：

page: 50,

它最初每页显示 50 个条目，但我希望能够有一个按钮或下拉菜单，我可以在其中选择显示所有条目，从而允许人们从所有内容中导出 csv，而不是每次只导出 50 个。

Answer 1

如果我正确理解你的问题，我会这样做：

HTML

  <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

listjs分页下拉显示全部

listjs pagination drop down to show all

javascript

pagination

listjs