Как сделать пагинацию на чистом js?

Question

[Денис]

Добрый ден.
Возможно этот вопрос задали уже много раз, но я совсем не нашел подходящего под мою идею пагинацию.
Если кто видел ответ на подобный вопрос, пожалуйста оставьте комент.

Вот сам код https://codepen.io/fristyr/pen/byVedQ
Я так понимаю нужно знать сколько всего элементов в блоке <div class="repos-wrapp">
сколько выводить на странице(максимально их должно быть 5) , и какая сейчас активная

Answer 1

[hzzzzl]

допустим https://api.github.com/users/fristyr/repos вернет массив 100 элементов, его сохраняем куда-нибудь
допустим, что выводим по 10 штук на страницу, значит делается 10 кнопок 1-2-3-...-10
и тогда по клику вычисляем те элементы из массива, которые надо отрисовывать

// buttonClicked = наша кнопка, например 2
// articlesOnPage = 10
// startFrom = buttonClicked * articlesOnPage

      const data = allRepos.slice(startFrom , startFrom + articlesOnPage)

      const htmlForRepo = data.map(function(item) {
        const repoLink = item.html_url
        return `
        <article class="repo"> 
             // important stuff goes here
        </article>
        `
      })

ну и да, классы на кнопки добавить и всё такое

Comments

[Денис]

Не получается... жаль

[sinneren]

Денис, что именно-то? Я проверил на вашем тестовым примером:

const dataSliced = data.slice(1 , 10)
      const htmlForRepo = dataSliced.map(function(item) {...}

Вам осталось лишь оформить константы количества, текущей страницы, события клика, вынести рендер в отдельный метод, который будете применять при клике.

Но оно вам действительно надо? у меня json даже на 2К данных вешался довольно скромных, не таких как тут объёмных, а что говорить о мобильниках уж

[Денис]

sinneren, не знаю я думал просто сделать overflow scroll но не знаю насколько это правильно с точки зрения пользователя который смотрит

[hzzzzl]

Денис, по быстрому
https://codepen.io/anon/pen/JqYNyj?editors=1010

[Денис]

hzzzzl, сяб, но попробую всетаки доделать сам)