Как создать индивидуальный pagination?

Question

[Zholtayev808]

Есть 16 товаров на лендинге, как сделать pagination. Сверху стоит фильтр. На одной странице должно быть только 4 товара. Пробовал ставить разные плагины pagination, проблема в том при фильтре например на второй странице показывает только товары на второй странице а не все. Нужен pagination который режет контент по 4 элемента и выводят

Comments

[OVK2015]

Сами эл-ты откуда берет?

[Zholtayev808]

OVK2015: руками написал, php и бд нету

[OVK2015]

Zholtayev808: Т.е. без всяких ajax? Просто в дереве документа эти блоки лежат?

[Zholtayev808]

OVK2015: да, что можно придумать?

[OVK2015]

Zholtayev808: Да что тут думать то?
1. Делить кол-во эл-ов на 4. Получать кол-во страниц.
2. Добавлять кнопки по кол-ву страниц из п.1 Прикрутить к ним обработчик
3. Все эл-ты с №> 4 сначала не видны.
4. В обработчике, в зависимости от порядкового № кнопки,- показываеь опред. группу из 4-ех эл-ов. Остальные прятать.
Вроде все

[Zholtayev808]

OVK2015: Можете пример привести или ссылку на частичку кода дать? если есть, на javascripte только учусь, помогите плз

[OVK2015]

Zholtayev808:

Можете пример привести или ссылку на частичку кода дать?

Можно,- если буду знать структуру вашей разметки.

[Zholtayev808]

На html-e используется бутстрап и jquery, состоит из одного главного блока div-elements и товары div item итд. Можете примеры привести самый простой, я свои товары туда запихаю

[OVK2015]

Zholtayev808: Это в живую где-нибудь есть? Какие id/class у этих эл-ов? Структуру этого блока хотя бы покажите. В html эл-нт c какими атрибутами вставлять кнопки?

[Zholtayev808]

OVK2015: https://jsfiddle.net/ou9o7ddo/ вот пример

[Zholtayev808]

OVK2015: Спасибо вам огромное

[OVK2015]

Zholtayev808: Не за что! За ответ пойдет?

[Zholtayev808]

OVK2015: да конечно!

[Zholtayev808]

OVK2015 есть еще один вопрос, можно сделать так: когда у меня стоит на первой странице и когда я через фильтр выбираю мягкий, то страница пустая, а мягкая на второй странице, только при клике на вторую становится видным. Как такое сделать? Чтобы при клике на мягкий выводились на первой мягкие итд

[OVK2015]

Zholtayev808: А вот этого не понял.
1.

когда у меня стоит на первой странице и когда я через фильтр выбираю мягкий, то страница пустая, а мягкая на второй странице, только при клике на вторую становится видным

Мягкие только на 2-ой странице
2.

Чтобы при клике на мягкий выводились на первой мягкие итд

Мягкие на 1-ой странице.
Как-то взаимоисключающе выглядит.

[OVK2015]

Zholtayev808: Если я правильно понимаю, что кнопки вверху это своего рода фильтры. Тогда, по идее, каждому из эл-ов нужно присваивать набор классов. 1 класс = 1 св-во(мягкий/средний/жесткий и т.д.) Ну и при клике на кнопку-фильтр соответствующие выборки делать.

Answer 1

[OVK2015]

JS

var itemPerPage = 4,
      pageAmount;
    $(document).ready(function()
    {
      pageAmount = Math.round($('.name').length / itemPerPage);
      for(counter = 0; counter < pageAmount; counter++)
      {
        $('.navBtnWrapper').append
        (
          $(
            '<div class="navBtn" data-pageIndex="' + counter + '">' +
            (counter + 1) +
            '</div>'
          )
        );
      }
      $('.navBtn').bind('click', navBtnHandler);
      showPageData(0);
    });

    function navBtnHandler(event)
    {
      showPageData(parseInt($(this).data('pageindex')));
    }

    function showPageData(pageIndex)
    {			
      $('.name').css({'display': 'none'});
      $('.name').slice
      (
        (pageIndex * itemPerPage),
        (pageIndex * itemPerPage) + itemPerPage
      ).css({'display': 'block'});
    }

В конец html добавьте:
<div class="navBtnWrapper col-md-12"></div>
Ну и css по вкусу