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

Question

[Евгений]

В чём смысл. Если слева асайд с параметрами фильтрации. При загрузке страницы с сервера аяксом забираются все ноутбуки (Верстка формируется на стороне сервера). Т е в success прилетает вёрстка и я просто вставляю её в нужный блок. Но тут стал довольно геморный вопрос. Если ноутбуков получено больше 6 то уже нужна пагинация. А данные находятся ведь на стороне пользователя. Как в таком случае можно реализовать пагинацию?

Comments

[Дмитрий]

Доброе утро.
Этот вопрос продолжение предыдущего Вашего вопроса?

[Максим Федоров]

В какой такой success прилетает вёрстка? Как с этим разобраться? ;) :)

На стороне сервера формируйте вёрстку с учётом параметра пагинации

[Евгений]

slo_nik, Типа того. Внизу предложили интересную идею. Сейчас напишу функцию для кнопок и проверю как рабоатет

[Дмитрий]

Внизу предложили интересную идею.

Евгений, а зачем? В yii2 есть необходимые виджеты. Используйте их и не лепите велосипед.

[Евгений]

slo_nik, Я делал пагинацию на php. Но тут вся проблема что данные висят на стороне пользователя и нам важно не потерять их

[Дмитрий]

Евгений, не совсем понятно.

[Евгений]

slo_nik, Линк Пейджер я юзал, и оборачивал это всё дело в PJAX. В другом проекте. Всё прекрасно без проблем работало. Но тут случай то другой

[Lander]

slo_nik,

не совсем понятно.

Минимизация трафика. Один раз данные приходят в клиент, а затем фильтруются, сортируются и пагинируются на стороне клиента. При многократном тереблении кнопок снижается трафик (так как скорее всего первая страница всё равно открывается с полным списком) и нагрузка на сервер (за счёт уменьшения количества запросов к БД при каждом чихе). Видимо планируется хайлоад, часть вычислительных ресурсов которых, планируется распределить по клиентам.

[Евгений]

Lander, Фильтрация на стороне сервера происходит. В сайд баре есть кнопка Подобрать. в соответствии с выбранными параметрами очишает текущее содержимое блока, и получает новое с сооветствующими параметрами

Answer 1

[Lander]

Можно к обёртке каждой позиции прайса дописывать её индекс через ...data-index="15"...
А потом при клике на кнопку страницы, скрывать те, что не должны быть отображены на этой странице.
Например для страницы 2 скрыть все и отобразить 7-13 индексы. и т.д.

Comments

[Евгений]

Хм, интересная идея. Сейчас попробую реализовать посмотрю что из этого получится) Отпишусь

[Евгений]

Запутался уже и перепробовал 100500 вариантов. Из-за никакого знанния jquery не могу правильно перебор сделать.

Дата параметр я добавил, и чтобы изначально не было награмаждения, убрал видимость выше 6 элемента.

<?php $i=1; foreach ($model as $item) :?>
    <?php if($i>6): ?>
    <div id = "productnote" class="col-md-4 col-xs-6" data-index ='<?=$i++;?>' style="display: none">
    <?php else: ?>
    <div class="col-md-4 col-xs-6" data-index ='<?=$i++;?>'>
    <?php endif; ?>

Вследствие чего полетела вёрстка уже с дата параметрами но с небольшой магией. Например какого то хрена, то сих пор не могу понять почему если я отправляю таким способом верстки и там есть кнопки, то они тупо не видят файл main.js. По клику ничего не происходит. Зато если кнопку вставляю на сервере без аякса, то всё ок и она уже всё видит.

Но допустим на перебор не влияет.

Я пока не стал заморачиваться с кнопками пагинации так как нужно сами кнопки ещё делать функциональными.

Добавил просто вниз кнопку Показать ещё. Пока что пишу код js прям в вьюхе которую засылаю аяксом. Так как хотя бы так код оно видит.

Как правильно перебрать все блоки с id btnpagination и тем у кого дата паметр от 1 до 6 поставить display:none, а с 7 по 12 убрать невидимость?

Четвертый час тестирую разные варианты и всё не то.

[Lander]

1. id = "productnote". Получается что у вас куча элементов с одинаковыми id. И скорее всего вы этот id используете в качестве селектора. Выборка по id возвращает только ПЕРВЫЙ найденный элемент.
2. Сделайте лучше класс class="col-md-4 col-xs-6 productnote" и отбирайте все элементы с ним.
3. В следствии пунктов 1 и 2 код обработки клика по кнопке пагинации <a class="page" data-page="2">2</a> должен выглядеть примерно так (не проверял):

$('body').on('click', '.page', function(e) {
    var page = $(this).data('page');
    var pageSize = 6;

    e.preventDefault();
    $('.productnote').hide();
    
    for (var i = page*pageSize; i < (page+1)*pageSize; i++) {
        $('.productnote[data-index="'+i+'"]').show();
    }
});

[Евгений]

Lander, Не увидел ваше сообщение) Я сделал вот так. Тут одна общая кнопка "Показать следующие 6"

function paginationButton()
{
    $('#btnpagination').animateCss('pulse', function() {
    var pag = document.querySelectorAll("#productnote");
    for (var i = 0; i<pag.length; i++)
    {
        if (pag[i].style.display == "block")
		{
            for (var b = i+6; b<i+12; b++)
			{
                if(pag[b]==undefined)
				{
                    $('#buttonfilter').empty();
                    break;
				}
				pag[b].style.display = "block";
			}
            for (var c = i+5; c>=0; c--)
            {
                pag[c].style.display = "none";
            }
			break;
		}

    }
    });

}