Question

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

例如，配置如下：

function joinMailingList(email) { return Either.map(validateEmail(email), addAndBlast) } function addAndBlast(email) { return IO.chain(addToMailingList(email), emailBlast) }

它原本每页显示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分页下拉显示全部

1 个答案: