Раскрытие списка страниц, чтобы показать все - PullRequest
0 голосов
/ 19 мая 2018

Есть ли в нумерации страниц список кнопок, которые будут отображать все доступные в таблице, а у вас все еще есть возможность прокручивать сами страницы.

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

Так, например, конфигурация выглядит следующим образом:

page: 50,

Первоначально будет отображаться 50 записей на странице, но я хотел бы иметь возможность иметь кнопку или раскрывающийся список там, где яМожно выбрать показать все, что позволяет людям экспортировать CSV из всего, а не только 50 каждый раз.

1 Ответ

0 голосов
/ 20 июня 2018

вот как бы я это сделал, если бы правильно понял ваш вопрос:

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

...