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

Question

Делаю пагинацию на VUE. (знаю что есть некоторые готовые модули, но мне они не подходят).

Вот что у меня получилось:

<ul class="pagination">
    <li class="pagination__item" v-for="(page, key) in 100">
        <div v-if="page != tradersListSortConfig.currentPage">
            <a href="javascript:;" class="pagination_link">{{ page }}</a>
        </div>

        <div v-else>
            <span class="pagination_link active">{{ page }}</span>
        </div>
    </li>
</ul>

И все бы хорошо, но когда у меня например 100 страниц, то они все выводятся в ряд, и получается некрасиво и длинно...

Я бы хотел сделать чтобы вывод страниц был, например такой:

1, 2, 3, ..., 98, 99, 100

Но когда я например открыть 10 страницу, то уже такой

..., 8, 9, 10, ..., 98, 99, 100

Буду очень рад любой помощи!

UPD. насколько я понимаю, вместо <li .... in 100 100 - нужен массив вида:

[
    ..., 8, 9, 10, ..., 98, 99, 100
]

который будет генерироваться в зависимости от того на какой номер текущей страницы. но пока не понимаю как его генерировать...

Answer 1

Нашел то что нужно. Может кому-то пригодиться https://gist.github.com/kottenator/9d936eb3e4e3c3e02598

console.log( pagination(30, 100) );

    function pagination(c, m) {
        var current = c,
            last = m,
            delta = 2,
            left = current - delta,
            right = current + delta + 1,
            range = [],
            rangeWithDots = [],
            l;

        for (let i = 1; i <= last; i++) {
            if (i == 1 || i == last || i >= left && i < right) {
                range.push(i);
            }
        }

        for (let i of range) {
            if (l) {
                if (i - l === 2) {
                    rangeWithDots.push(l + 1);
                } else if (i - l !== 1) {
                    rangeWithDots.push('...');
                }
            }
            rangeWithDots.push(i);
            l = i;
        }

        return rangeWithDots;
    }

Answer 2

Ещё как вариант:

https://gist.github.com/Aleksandr-JS-Developer/821b17344350592afae6af67654b0339

const getPagination = (currentPage, lastPage, offset = 3) => {
  const res = [];

  if (currentPage > offset + 2) {
    res.push(1, '...');
  }

  res.push(
    ...Array.from(
      { length: offset * 2 + 1 },
      (_, i) => currentPage - offset + i
    ).filter((i) => i > 0 && i <= lastPage)
  );

  if (lastPage - currentPage > offset) {
    res.push('...', lastPage);
  }

  return res;
}

БЛОГ НА HUSL

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

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