0

Есть функция пагинации:

js

function Pagination() {
    var rowsShown = $('.quantity__link_active').data('value');
    if(rowsShown === 'all') {
        $('.table__row').show();
        $('.pageList__link').remove();
    } else {
        var rowsTotal = $('.table__row').length;
        var numPages = Math.ceil(rowsTotal/rowsShown);
        $('.pageList__link').remove();

        for(var i = 0; i < numPages; i++) {
            var pageNum = i + 1;
            $('.pageList').append('<a href="#" rel="'+ i +'" class="pageList__link">'+ pageNum +'</a> ');
        }
        $('.pageList__link:first').addClass('pageList__link_active');
        $('.table__row').hide()
        for(var i = 0; i <= rowsShown - 1; i++) {
            $($('.table__row')[i]).show();
        }

        $('.pageList__link').on('click', function(){
            $('.pageList__link').removeClass('pageList__link_active');
            $(this).addClass('pageList__link_active');
            $('.table__row').hide();

            var currPage = $(this).attr('rel');
            var startItem = currPage * rowsShown;
            var endItem = startItem + rowsShown;
            for(var i = startItem; i < endItem; i++) {
                $($('.table__row')[i]).show();
            }

            return false;
        });
    }
};

html

<div class="pageList"></div>
<div class="quantity__items">
    <span class="quantity__text">Количество задач:</span>
    <a class="quantity__link quantity__link_active" href="#" data-value="20">20</a>
    <a class="quantity__link" href="#" data-value="50">50</a>
    <a class="quantity__link" href="#" data-value="100">100</a>
    <a class="quantity__link" href="#" data-value="all">все</a>
</div>

table__row встраивается автоматически из json файла.

Если страниц меньше 7, выглядит адекватно, но как только страниц становится больше, то едет вёрстка.

Хотелось бы сделать так:

Переключение страниц

Объясните, пожалуйста, алгоритм "сворачивания" страниц, если их становится больше 5. Желательно, чтобы выводилась всегда первая и последняя страница.

Без готовых решений и плагинов. Хочется понять, как оно работает и своими силами написать.

Спасибо!

UPD: Сделал сворачивание, но не могу понять, как выводить следующие 2 страницы.

if($('.pageList__link').length > 5) {
            $('.pageList__link').hide();
            $('.pageList__link:first').show().after('<span class="pageList__ellipses">...</span>');
            $('.pageList__link:last').show();
        }

1 ответ 1

0

Работает это так:

Исходя из того сколько у вас элементов всего и значения (сколько элементов показать на странице) - высчитывается var numPages. Затем идет цикл for(var i = 0; i < numPages; i++) который добавляет в DOM ссылки пагинации. Количество страниц (и соответственно ссылок) напрямую зависит от элементов в .table__row и сколько показываете на странице. Например у вас 15 элементов и по пять на странице = получите 3 ссылки пагинации. Если 50 элементов то получите 10 ссылок и верстка поедет как вы сказали.

Поэтому для решения вашего вопроса я написал ф-ю пагинации таким образом чтобы генерировался массив чисел (ссылок). Причем если предпоследнее число списка ссылок меньше чем предпоследнее число из всего количества ссылок, то показывается многоточие. Например:

var totalElements = 600; // элементов всего
var perPage = 5; // сколько элементов на странице
var visibleLinks = 10; // сколько ссылок хотим видеть;

Для этого условия изначально генерируется массив из 10 чисел (ссылок) такого вида:

[1,2,3,4,5,6,7,8,9,120] \\ последнее число это totalElements/perPage

Так как 9 меньше чем 119 то на странице показываем многоточие после девятки

Вот пример всей пагинации на codepen jQuery pagination

Для перелистывания нужно кликать по крайним ссылкам (что внутри многоточий) или просто по начальной и конечной ссылке для быстрого перехода в начало или конец

1

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.