Ограничить отображение товаров jquery/php

Question

Есть товары которые берутся из БД, на сайте должно выводить 5 картинок и снизу есть кнопка "Показать ещё". Нужно сделать так чтобы выводилось только 5 товаров и при нажатии на кнопку ещё +5. Вывод товаров из БД

<?php 
                            foreach ($elems as $elem) {
                                switch (strlen($elem['id'])) {
                                    case 1:
                                        $elem['id'] = '000'.$elem['id'];
                                        break;
                                    case 2:
                                        $elem['id'] = '00'.$elem['id'];
                                        break;
                                    case 3:
                                        $elem['id'] = '0'.$elem['id'];
                                        break;
                                    default:
                                        break;
                                }
                                    if ($img = glob($dir_img.$elem['id'].'.*')) {
                                        $img = basename($img[0]);
                                    } else {
                                        $img = 'null.png';
                                    }   
                        ?>

                        <div class="item no-slider col-xs-12 col-sm-6 col-md-4 col-lg-1-5" id="hide-items">
                            <div class="product-thumb transition">
                                <div class="image">
                                    <div class="stickers-ns">
                                        <!-- <div class="sticker-ns bestseller">
                                            <i class="fa fa fa-rocket "></i>
                                            <span>Лидер продаж!</span>
                                        </div>
                                    </div>
                                    <a href="#">
                                        <img src="../img/tovaru/<?=$img?>" alt='<?=$elem['name']?>' title="<?=$elem['name']?>" class="img-responsive lazyloaded">
                                    </a>
                                </div>

                                <div class="caption">
                                    <div class="product-name">
                                        <a href="#"><?= $elem['name']?></a>
                                    </div>
                                    <div class="product-model"><?= $elem['id']?></div>
                                    </div>
                                    <div class="quantity_plus_minus">
                                        <div class="quantity_cont">
                                            <div class="input-group">
                                                <span class="input-group-btn">
                                                    <button class="btn btn-quantity-minus" onclick="" type="button">-</button>
                                                </span>
                                                <input id="input_quantity_mod_latest_grid06243" class="form-control input-number-quantity6243" name="quantity" size="2" value="1">
                                                <span class="input-group-btn">
                                                    <button class="btn btn-quantity-plus" onclick="" type="button">+</button>
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="actions">
                                        <div class="cart">
                                            <button class="btn btn-general" type="button" onclick="">
                                                <i class="fa fa-shopping-basket"></i><span>В корзину</span>
                                            </button>
                                        </div>
                                    </div>    
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <?php 
                            };
                        ?>

Jquery.js

let items = $('.item'),
   let show_more = $('#show_more'),
    n = 5;
function showMore(n) {
  for (var i = 0; i < items.length; i++) {
    if (i < n) {
      items[i].css('display', 'block');
      if (n === items.length) show_more.css('display','none');
    } else  {
        break;
    }
  }
}
showMore(n);
show_more.onclick = function(e) {
  e.preventDefault();
  n += 5;
  showMore(n);
}

Вообще тут надо ajax запрос для кнопки, но это не особо важно, это потом. Мне нужно понять как ограничить вывод товаров. Я пробовал еще .slice(5) , но тоже не работает, выводит все товары

Answer 1

Собственно причин несколько.

Так как Вы применяете метод .css(), то и применять его нужно к jQuery объекту, потому вместо items[i].css('display', 'block'); делаем $(items[i]).css('display', 'block');. Но так-то удобнее было бы воспользоваться просто методом .show(), а вместо css('display','none') можно использовать .hide()
show_more.onclick -- опять же, посмотрите что такое show_more, это jQuery объект, потому заменяем на show_more.click().

const items = $('.item');
const show_more = $('#show_more');
let n = 5;
function showMore(n) {
  for (var i = 0; i < items.length; i++) {
    if (i < n) {
      $(items[i]).css('display', 'block');
      if (n === items.length) show_more.css('display','none');
    } else  {
        break;
    }
  }
}
showMore(n);
show_more.click(function(e) {
  e.preventDefault();
  n += 5;
  showMore(n);
});

.item {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
<div class="item">Item 5</div>
<div class="item">Item 6</div>
<div class="item">Item 7</div>
<div class="item">Item 8</div>
<div class="item">Item 9</div>
<div class="item">Item 10</div>
<div class="item">Item 11</div>
<div class="item">Item 12</div>
<div class="item">Item 13</div>
<div class="item">Item 14</div>
<div class="item">Item 15</div>
<button id="show_more">Show More</button>

Answer 2

Загрузить тысячи строк и отображать их по 5 не имеет смысла.

Пагинация должна быть реализована на бэке на уровне запроса к БД.

Скрипт получает параметр $_GET[$page] и делает запрос (примерно)

$perPage=5
$query->select(...)->limit($perPage)->offset($page*$perPage)

(синтаксис зависит от вашей субд или фреймворка https://learntutorials.net/ru/sql/topic/2927/skip-take--pagination-)

получили порцию по 5 записей - передали на фронт.

По кнопке "Показать ещё" ajax запрашивает &page=1 (2,3,4...) и ответ добавляет на страницу и тд

БЛОГ НА HUSL

Ограничить отображение товаров jquery/php

Ответы (2 шт):