Пагинция на основе массива

132
27 января 2020, 06:00

Может кто сталкивался с такой задачкой, сервер мне присылает массив из 100 комментариев, и мне надо на странице отображать только первые 5 и кнопку "показать ещё" после нажатия на кнопку он отображает следующие 5 комментариев и снова кнопку "показать ещё" и так до самого конца массива. Собственно сам вопрос, можно ли это реализовать при помощи js и jquery? если да, то как, возможно есть какие то примеры?

Answer 1

Вот пример реализации на коленке

let data = Array(100).fill(0).map((d,i) => Math.random().toString(36).substring(2)); 
let count = 5; 
let current = 0; 
let max = Math.floor(data.length/count) - (data.length%count?0:1); 
 
page(0); 
 
function page(n) { 
  current = Math.min(Math.max(0, current+n), max); 
  let cc = current*count; 
  let show = data.slice(cc, cc + count) 
  document.querySelector('#count').innerHTML = `${cc+1}-${cc+count} / ${data.length}`; 
  document.querySelector('#result').innerHTML = show.map(d => `<div>${d}</div>`).join(''); 
}
div#result div { 
  border:1px solid;  
  margin:3px; 
  width: 120px; 
}
<button onclick='page(-1)'>&lt;</button> 
<span id="count"></span> 
<button onclick='page(+1)'>&gt;</button> 
<div id="result"></div>

Answer 2

Вот пример похожей реализации с использованием jquery

https://codepen.io/simoncodrington/pen/bgPYqr

READ ALSO
Динамические элементы в ссылке

Динамические элементы в ссылке

Есть несколько ссылок, такого вида:

143
Переиндексация MySQL/MariaDB

Переиндексация MySQL/MariaDB

В microsoft SQL есть возможность переиндексации всех таблиц БДТо есть когда начинает тормозить баз SQL, админ может зайти и руками сделать переиндексацию,...

204
Как закрепить полукруг внизу страницы

Как закрепить полукруг внизу страницы

Нужно закрепить внизу страницы полукруг, при этом страница не должна листатьсяКак на скриншоте

144