ProjectSoft

$(document).ready(function() {
    // инициализация Select2
    $(".city").select2({
        ajax: {
            url: "/ajax.php?action=main&type=get_city",
            type: "post",
            dataType: 'json',
            delay: 250,
            data: function(params) {
                return {
                    searchTerm: params.term
                };
            },
            processResults: function(response) {
                return {
                    results: response
                };
            },
            cache: true
        }
    });

    // глобальная переменная для хранения выбранного города
    let selectedCity = null;

    // обработчик выбора города
    $('.city').on('select2:select', function(e) {
        selectedCity = e.params.data.id; // или e.params.data.text в зависимости от того, что нужно
        console.log("Выбран город:", selectedCity);
    });

    // основная функция фильтрации
    function getFilter() {
        let action = 'get_data';
        let category = filterCategory('category');
        let city = selectedCity; // используем сохраненное значение города
        
        $.ajax({
            url: '/ajax.php?action=main&type=get_data',
            method: 'POST',
            data: { 
                action: action, 
                category: category, 
                city: city 
            },
            success: function(response) {
                $('#filterResults').html(response);
            }
        });
    }

    function filterCategory(classname) {
        let filter = [];
        $('.' + classname + ':checked').each(function() {
            filter.push($(this).val());
        });
        return filter;
    }

    $('.filter_click').click(function() {
        getFilter();
    });
});

<div class="wrap_item" data-section="1">
  <h3 class="title_heading">Секция №1</h3>
  <div class="wrap_elements">
    <div class="class_element">Элемент 1</div>
    <div class="class_element">Элемент 2</div>
    <div class="class_element">Элемент 3</div>
    <div class="class_element">Элемент 4</div>
    <div class="class_element">Элемент 5</div>
  </div>
  <div class="pagination"></div>
</div>

<div class="wrap_item" data-section="2">
  <h3 class="title_heading">Секция №2</h3>
  <div class="wrap_elements">
    <div class="class_element">Элемент A</div>
    <div class="class_element">Элемент B</div>
    <div class="class_element">Элемент C</div>
    <div class="class_element">Элемент D</div>
    <div class="class_element">Элемент E</div>
  </div>
  <div class="pagination"></div>
</div>

<div class="wrap_item" data-section="3">
  <h3 class="title_heading">Секция №3</h3>
  <div class="wrap_elements">
    <div class="class_element">Элемент α</div>
    <div class="class_element">Элемент β</div>
    <div class="class_element">Элемент γ</div>
    <div class="class_element">Элемент δ</div>
    <div class="class_element">Элемент ε</div>
  </div>
  <div class="pagination"></div>
</div>

document.addEventListener('DOMContentLoaded', () => {

    const itemsPerPage = 2;

    document.querySelectorAll('.wrap_item').forEach((section) => {
      const wrapElements = section.querySelector('.wrap_elements');
      const elements = Array.from(wrapElements.children);
      const paginationContainer = section.querySelector('.pagination');
      const totalPages = Math.ceil(elements.length / itemsPerPage);

      function showPage(page) {
        elements.forEach((el, index) => {
          el.style.display =
            index >= (page - 1) * itemsPerPage && index < page * itemsPerPage
              ? ''
              : 'none';
        });
      }

      function createPagination() {
        paginationContainer.innerHTML = ''; // очистили контейнер пагинации
        for (let i = 1; i <= totalPages; i++) {
          const button = document.createElement('button');
          button.textContent = i;
          button.addEventListener('click', () => {
            showPage(i);
            updateActiveButton(i);
          });
          paginationContainer.appendChild(button);
        }
        updateActiveButton(1); 
      }

      function updateActiveButton(activePage) {
        paginationContainer.querySelectorAll('button').forEach((btn, index) => {
          btn.classList.toggle('active', index + 1 === activePage);
        });
      }

      showPage(1);
      createPagination();
    });
  });

.wrap_elements {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }

  .class_element {
    padding: 10px;
    border: 1px solid #ccc;
    background: #f5f5f5;
  }

  .pagination button {
    margin: 0 5px;
    padding: 5px 10px;
    border: none;
    background: #ddd;
    cursor: pointer;
  }

  .pagination button.active {
    background: #ff6f61;
    color: #fff;
  }

document.querySelectorAll('link').forEach((e => t(e)))

function t(e){"text/css"!=e.type&&"stylesheet"!=e.rel||!e.href||new URL(e.href,document.baseURI).origin==location.origin&&fetch(e.getAttribute("href")).then((async t=>{const i=await t.text();let n=Pt.transpileStyleSheet(i,!0);if(n=Pt.transpileStyleSheet(i,!1),n!=i){const t=new Blob([n],{type:"text/css"}),i=URL.createObjectURL(t);e.setAttribute("href",i)}}))}