listjs pagination drop down to show all

Question

Is there a possibility in listjs pagination to have a button that will show all available in the table, while you still have the possibility to scroll through the pages themself.

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

So for example the configuration is as following:

page: 50,

It will origionally show 50 entries per page, but I would like to be able to have a button or drop down where I can choose to show all allowing people to export csv from everything instead of just a 50 every time.

Answer 1

here is how i would do it, if i understood your question correctly :

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;
}

You should refer to the documentation where you can find a lot of good information such as the list.update() or list.size() methods.

Here is the pen : https://codepen.io/anon/pen/vrdqZr