Как сделать "обрезанную" пагинацию?

Question

Допустим у меня есть число 30. Это кол-во страниц. Мне разом на страницу нужно выводить только пагинацию для 10 страниц. Т.е если выбрана 15 страница то на странице выводятся цифры в пагинации 11,12,13,14,15,16,17,18,20,21(т.е по несколько страниц от выбранной). Если выбрана 3, то соответственно все страницы до 3 и остаток после. Не понимаю логику как это реализовать.

Answer 1

const buttons = pagination.querySelectorAll('button')
const MIN = 1, MAX = 30

pagination.addEventListener('click', e => {
  if(e.target.tagName !== 'BUTTON') return
  
  const page = +e.target.dataset.page
  updateValues(page)
})

function updateValues(page) {
  buttons.forEach((button, i) => {
    button.innerText = clamp(page + i - 4, i)
    button.dataset.page = clamp(page + i - 4, i)
  })
}

function clamp(value, i) {
  return Math.max(MIN + i, Math.min(value, MAX - 9 + i))
}

body {
  height: 100vh;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

div {
  width: 70%;
  display: flex;
  justify-content: space-between;
}

button {
  width: 30px;
}

<div id="pagination">
  <button data-page="1">1</button>
  <button data-page="2">2</button>
  <button data-page="3">3</button>
  <button data-page="4">4</button>
  <button data-page="5">5</button>
  <button data-page="6">6</button>
  <button data-page="7">7</button>
  <button data-page="8">8</button>
  <button data-page="9">9</button>
  <button data-page="10">10</button>
</div>

БЛОГ НА HUSL

Как сделать "обрезанную" пагинацию?

Ответы (1 шт):