How to link pagination with product filtering. Filter products to do on ajax?

Question

PHP

JS Code

$(document).ready(function () {
  filter_data();
  function filter_data() {
    $('.catalog__grid').html('<div id="loading" style="" ></div>');
    const action = 'list-products';
    const minimum_price = $('#input-0').val();
    const maximum_price = $('#input-1').val();
    const brand = get_filter('brand');
    const cpu_series = get_filter('cpu_series');
    const graphics = get_filter('graphics');
    const graphics_type = get_filter('graphics_type');
    const ram = get_filter('ram');
    const hdd = get_filter('hdd');
    const ssd = get_filter('ssd');
    const os = get_filter('os');
    $.ajax({
      url: '../data/list-products.php',
      method: 'POST',
      data: {
        action: action,
        brand: brand,
        cpu_series: cpu_series,
        graphics: graphics,
        graphics_type: graphics_type,
        ram: ram,
        hdd: hdd,
        ssd: ssd,
        os: os,
        minimum_price: minimum_price,
        maximum_price: maximum_price,
      },
      success: function (data) {
        $('.catalog__grid').html(data);
        makePagination();
        setImageOnHover('mouseover');
        setImageOnHover('mouseout');
      },
    });
  }

  function get_filter(class_name) {
    var filter = [];
    $('.' + class_name + ':checked').each(function () {
      filter.push($(this).val());
    });
    return filter;
  }

  $('.custom-checkbox__field').click(function () {
    filter_data();
  });

  rangeSlider.noUiSlider.on('update', (values, handle) => {
    inputs[handle].value = Math.round(values[handle]);
    filter_data();
  });

  document.querySelector('.catalog__reset-btn').onclick = function () {
    var brand_elements = document.getElementsByClassName('custom-checkbox__field');
    for (var count = 0; count < brand_elements.length; count++) {
      brand_elements[count].checked = false;
    }

    filter_data();
  };
});

PHP code

<?php
include ('connect.php');
$limit = 4;
if (isset($_GET["page"])) {
    $page = $_GET["page"];
} else {
    $page = 1;
};
$start_from = ($page - 1) * $limit;
if (isset($_POST["action"])) {
    $query = "
    SELECT * FROM pc WHERE product_status = '1'
  ";
    if (isset($_POST["minimum_price"], $_POST["maximum_price"]) && !empty($_POST["minimum_price"]) && !empty($_POST["maximum_price"])) {
        $query.= "
     AND price BETWEEN '" . $_POST["minimum_price"] . "' AND '" . $_POST["maximum_price"] . "' 'AND LIMIT 1'
    ";
    }
    if (isset($_POST["brand"])) {
        $brand_filter = implode("','", $_POST["brand"]);
        $query.= "
     AND brand IN('" . $brand_filter . "')
    ";
    }
    if (isset($_POST["cpu_series"])) {
        $ram_filter = implode("','", $_POST["cpu_series"]);
        $query.= "
     AND cpu_series IN('" . $ram_filter . "')
    ";
    }
    if (isset($_POST["graphics"])) {
        $graphics_filter = implode("','", $_POST["graphics"]);
        $query.= "
     AND graphics IN('" . $graphics_filter . "')
    ";
    }
    if (isset($_POST["graphics_type"])) {
        $graphics_type_filter = implode("','", $_POST["graphics_type"]);
        $query.= "
     AND graphics_type IN('" . $graphics_type_filter . "')
    ";
    }
    if (isset($_POST["ram"])) {
        $ram_filter = implode("','", $_POST["ram"]);
        $query.= "
     AND ram IN('" . $ram_filter . "')
    ";
    }
    if (isset($_POST["hdd"])) {
        $hdd_filter = implode("','", $_POST["hdd"]);
        $query.= "
     AND hdd IN('" . $hdd_filter . "')
    ";
    }
    if (isset($_POST["ssd"])) {
        $ssd_filter = implode("','", $_POST["ssd"]);
        $query.= "
     AND ssd IN('" . $ssd_filter . "')
    ";
    }
    if (isset($_POST["os"])) {
        $os_filter = implode("','", $_POST["os"]);
        $query.= "
     AND os IN('" . $os_filter . "')
    ";
    }
    $result = mysqli_query($conn, $query . ' LIMIT ' . $start_from . ', ' . $limit . '');
    $result_row = mysqli_fetch_all($result);
    $total_row = mysqli_num_rows($result);
    $output = '';
    if ($total_row > 0) {
        foreach ($result_row as $row) {
            $arr = explode(',', $row[12]); = < divclass = "catalog__product product" > < divclass = "product__box" > < divclass = "product__image" > < aclass = "product__image-link"href = "#" > < pictureclass = "product__image-picture" > < ? php
?>
                <source srcset="<?=$arr[0] ?>.jpg">
                <img class="product__image-main" src="<?=$arr[0] ?>.jpg" alt="<?=$row[13] ?>"></img>
                <?php
?>
              </picture>
              <div class="product__image-hover">
                <?php
            foreach ($arr as $img) {
?>
                  <div class="product__image-hover-part" data-src="<?=$img
?>.jpg"></div>
                <?php
            }
?>
              </div>
              <ul class="product__image-pagination image-pagination" aria-hidden="true"></ul>
            </a>
          </div>
          <div class="product__header">
            <a href="#">
              <h3 class="product__title"><?=$row[2] ?></h3>
            </a>
          </div>
        </div>
      </div>


    }
  } else {
    $output = '<h3>No Data Found</h3>';
  }
  echo $output;
}

$result_count = mysqli_query($conn, "SELECT COUNT(*) As total_data FROM `pc`");
$total_records = mysqli_fetch_array($result_count);
$total_data = $total_records['total_data'];
$total_pages = ceil($total_data / $limit);

$pagination = '';
$pagination .= " 
  <div class='pagination'> 
";

if ($page > 1) {
  $prev = $page - 1;
  $pagination .= " <a class='pagination__btn' href='?page=" . $prev . "'>Предыдущая</a>
  ";
}

$pagination .= " 
  <ul class='pagination__list'> 
";

for ($i = 1; $i <= $total_pages; $i++) {
  $active_class = '';
  if ($i == $page) {
    $active_class = 'pagination__list-link--active';
  }
  $pagination .= "<li class='pagination__list-item'><a class='pagination__list-link " . $active_class . " ' href='?page=" . $i . "'>" . $i . "</a></li>";
}

$pagination .= " 
  </ul> 
";

if ($page < $total_pages) {
  $pagination .= "<a class='pagination__btn' href='?page=" . ($page + 1) . "'>Следующая</a>
  ";
}

$pagination .= " 
  </div> 
";
echo $pagination;