Выгрузка из поиска как сделать?

Question

[opsimecom]

Здравствуйте! У меня есть поиск по сайту

<?php
    require_once 'config.php';

    $s = (!empty($_GET['s']))?$_GET['s']:'';
    $s = trim($s);
    if($s == ''){
      $sql = "SELECT * FROM products";
    }
    else{
      $sql = "SELECT * FROM products WHERE product_name LIKE '%".$s."%' OR opis LIKE '%".$s."%'";
    }
    $stmt = $pdo->prepare($sql);
    $stmt->execute();
    
  ?>

и форма

<div class="d1">                          
            <form action="/spytoolv.php" method="GET">         
              <input type="text" name='s' value='<?=$s?>' placeholder='Найти креатив...'>
              <button></button>
            </form>
          </div>

У меня в бд большое количество данных, и при запросе например "тест" находит больше 5к записей вместе с картинками... Как сделать так чтобы оно выдавало не все сразу , а постепенно ? например с кнопкой "Показать еще"

Вот код выдачи

<div class="card-border mb-4 card-teaser">
    <div class="row2">
     
      <?php
      while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) : ?>
      <div class="card2 card-body2   col-xl-3">
      <?php
        if($row['product_video_link'] == '0'):
      ?>
       
           <div> 
        
       <!-- Bootstrap 4 -->
  <div id="sliderBigImages<?=$row['product_id']?>" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img src="https://275129.selcdn.ru/macaw/<?=$row['product_image_link']?>" alt="" style="width: 100%;">
        </div>
        
       <div class="carousel-item">
           <img src="https://275129.selcdn.ru/macaw/<?=$row['product_image2_link']?>" alt="" style="width: 100%;">
        </div>
         <div class="carousel-item">
           <img src="https://275129.selcdn.ru/macaw/<?=$row['product_image3_link']?>" alt="" style="width: 100%;">
        </div>
    </div>
    <a class="carousel-control-prev" href="#sliderBigImages<?=$row['product_id']?>" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next"href="#sliderBigImages<?=$row['product_id']?>" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
        
    </a>
</div> 
        
<!--class='lazyload' data-src=-->
        </div>
      <?php
        else:
      ?>
        <video class ="img-fluid"  controls="controls">
          <source src = "https://275129.selcdn.ru/macaw/<?=$row['product_video_link']?>">
        </video>
      <?php
        endif;
      ?>
         <div class ="brd2">
          <a title="Наведите курсор мышки на макет и нажмите правую кнопку мыши, и сохранить изображение/видео как" href="https://275129.selcdn.ru/macaw/<?=((!empty($row['product_video_link']))?$row['product_video_link']:$row['product_image_link'])?>">&#128190; Скачать макет &#128190;</a>
         </div>
         <div class ="brd2">
          <?=$row['product_id']?>
         </div>
         <div class ="brd2"> 
          &#127915; <?=$row['product_name']?> &#127915;
         </div>
         <div class ="brd2">
          <a>
            &#127757; <?=$row['price'] ?> &#127757;
          </a>
         </div>
         <div class ="brd2">
          <article>
            <h2></h2>
            <p>
              &#128172; <?=$row['opis']?> &#128172;
            </p>
          </article>
         </div>       
         <div class ="brd2 ">
          &#128187; <?=$row['socs']?> &#128187;
         </div>
         <div class ="brd2">
          <a href="<?=$row['link']?>">
            &#128073; <?=$row['link']?>
          </a>
         </div>
        </div>
      <?php
      endwhile;
      ?>
      </div>
    </div>

Answer 1

[Adik Izat]

ORDER BY, LIMIT

Answer 2

[Fomichevap]

Делаешь два запроса - COUNT(*) по выборке и собственно запрос
на страницу возвращаешь - количество элементов по запросу и пагинатор.
Жмяканье пагинатора возвращает в скрипт поисковый запрос и текущую страницу которую ты подставляешь в LIMIT ORDER.