Фильтр для news list с ajax?

Question

[justbefree]

Есть страничка с компонентом news list, выводится инфа из разделов инфоблока, сверху над элементами список разделов (это года (все, 2018, 2017 и т.д.)). нужно при клике на раздел фильтровать элементы без обновления страницы.
подскажите как правильно реализовать.

Comments

[Vladimir]

т.е. при клике на 2018 должно остаться на странице только то, что относиться к 2018, для 2017 к 2017 и т.д.?

[justbefree]

да. верно

[Vladimir]

их совсем надо удалять или только срыть? Есть html выложить?

[justbefree]

Bigata,

<div class="reports__folders">
                <div class="reports__selection nav-scroll-wrap">
                    <div class="nav-scroll js-nav-scroll">
                        <ul class="nav-scroll__list js-nav-scroll-list">
                            <li class="nav-scroll__item nav-scroll__item--active js-nav-scroll-item"><a href="#0"
                                                                                                        class="nav-scroll__link">Все время</a>
                            </li>
                                                            <li class="nav-scroll__item js-nav-scroll-item swiper-slide-next"><a href="#0"
                                                                                                     class="nav-scroll__link">2017</a>
                                </li>
                                                            <li class="nav-scroll__item js-nav-scroll-item swiper-slide-next"><a href="#0"
                                                                                                     class="nav-scroll__link">2016</a>
                                </li>
                                                            <li class="nav-scroll__item js-nav-scroll-item swiper-slide-next"><a href="#0"
                                                                                                     class="nav-scroll__link">2015</a>
                                </li>
                                                            <li class="nav-scroll__item js-nav-scroll-item swiper-slide-next"><a href="#0"
                                                                                                     class="nav-scroll__link">2014</a>
                                </li>
                                                            <li class="nav-scroll__item js-nav-scroll-item swiper-slide-next"><a href="#0"
                                                                                                     class="nav-scroll__link">2013</a>
                                </li>
                                                    </ul>
                    </div>
                </div>
                <ul class="reports__folders-list">
                    <li class="reports__folder  js-tabs-nav-content-wrap" id="tab-item1">
                        <ul class="reports__documents">
                                                                                        

                                <p class="news-item" id="bx_3218110189_321">
                                <li class="document">
                                                                        <a class="document__icon-wrap"
                                       href="/upload/iblock/c8f/c8f08744fae76e5fe29ac8a6e2dd9cee.png"
                                       download="тест поле нейм">
                                        <svg width="35" height="45" class="document__icon">
                                                                                            <use xlink:href="/local/templates/main/icons/sprite.svg#doc-list"></use>
                                                                                    </svg>
                                                                            </a>
                                    <a class="document__info"
                                       href="/upload/iblock/c8f/c8f08744fae76e5fe29ac8a6e2dd9cee.png"
                                       download="тест поле нейм">тест2</a>
                                    <div class="document__info-bottom">
                                        <span class="document__info-item">21.1 КБ</span>
                                        <span class="document__info-item">18.05.2018</span>
                                    </div>
                                </li>
                                </p>
                                                            

                                <p class="news-item" id="bx_3218110189_322">
                                <li class="document">
                                                                        <a class="document__icon-wrap"
                                       href="/upload/iblock/52c/52ce2adce9763463b02e83c46d752844.pdf"
                                       download="guid.pdf">
                                        <svg width="35" height="45" class="document__icon">
                                                                                            <use xlink:href="/local/templates/main/icons/sprite.svg#doc-frame"></use>
                                                                                    </svg>
                                                                                    <span class="document__format">pdf</span>
                                                                            </a>
                                    <a class="document__info"
                                       href="/upload/iblock/52c/52ce2adce9763463b02e83c46d752844.pdf"
                                       download="guid.pdf">тест3</a>
                                    <div class="document__info-bottom">
                                        <span class="document__info-item">83.3 КБ</span>
                                        <span class="document__info-item">17.01.2018</span>
                                    </div>
                                </li>
                                </p>
                                                    </ul>
                    </li>
                </ul>
            </div>

Answer 1

[Никита]

Включить режим аякс у компонента и сформировать правильные ссыллки

Comments

[justbefree]

Пример какой то можно "правильной" ссылки. или что подразумевается

[Никита]

justbefree, lesorub59.ru/news вот прямо ваш пример

[Никита]

скажите как посмотрите, я аякс выключу потом ) А то сетка с ним едет :)

[justbefree]

Никита, посмотрел. спасибо.

[ragnar_ok]

Никита, я правильно понимаю, что достаточно подключить catalog.filter и прописывать в ссылках параметры?