Как сделать кнопку показать еще js

 
Как уже неоднократно упомянуто, стремящиеся вытеснить традиционное производство, нанотехнологии освещают чрезвычайно. интересные особенности картины в целом, однако конкретные выводы, разумеется, объединены в целые кластеры себе подобных! Прежде всего, курс на социально-ориентированный национальный проект прекрасно подходит для реализации системы массового участия. 
 Показать больше 

 #more

prepare("SELECT * FROM `prods` LIMIT 3"); $sth->execute(); $items = $sth->fetchAll(PDO::FETCH_ASSOC); // Кол-во страниц $sth = $dbh->prepare("SELECT COUNT(`id`) FROM `prods`"); $sth->execute(); $total = $sth->fetch(PDO::FETCH_COLUMN); $amt = ceil($total / 3); ?> 
 
 

prepare("SELECT * FROM `prods` LIMIT , "); $sth->execute(); $items = $sth->fetchAll(PDO::FETCH_ASSOC); foreach ($items as $row) < ?>
 

/* Кнопка */ .showmore-bottom < text-align: center; >.showmore-bottom a < padding: 20px 30px; display: inline-block; border: 1px solid #3f2aff; border-radius: 100px; color: #fff; font-weight: 500; font-size: 16px; text-align: center; vertical-align: top; background-color: #3f2aff; text-decoration: none; margin-bottom: 20px; >/* Вывод товаров */ .prod-list < overflow: hidden; margin: 0 0 20px 0; >.prod-item < width: 174px; height: 230px; float: left; border: 1px solid #ddd; padding: 20px; margin: 0 20px 20px 0; text-align: center; border-radius: 6px; >.prod-item-img < width: 100%; >.prod-item-name < font-size: 13px; line-height: 16px; >.prod-list .prod-item:nth-child(3n)

prepare("SELECT SQL_CALC_FOUND_ROWS * FROM `prods` LIMIT , "); $sth->execute(); $items = $sth->fetchAll(PDO::FETCH_ASSOC); // Узнаем сколько всего записей в БД $sth = $dbh->prepare("SELECT FOUND_ROWS()"); $sth->execute(); $total = $sth->fetch(PDO::FETCH_COLUMN); $amt = ceil($total / $limit); ?> 
 
 

Результат:

18.12.2020, обновлено 05.04.2022
Предыдущая запись Отправка sms через «SMS Aero» в PHP
Следующая запись Подгрузка контента при прокрутке (бесконечная лента)

Комментарии 2

26 января 2021 в 21:13

Здравствуйте!Очень благодарен за Ваш пост!Я использую второй вариант Вашего кода. Архитектура моего приложения — MVC, работа с базой данных через ORM RedBeans. Кнопка Показать еще пропадает при полном выводе данных из таблицы.
Но есть вопрос: подгруженные данные приклике не выводятся в виде. Т.е. они выводятся, курсор их видит и при клике на их место происходит переход по их ссылке (в данном случае на страницу карточки товара).Я не сильно какой кодер. Всю голову сломал, но так и не понял причину.Запрос к DB — $products = \R::find(‘product’, «LIMIT $start, $perpage»);Если нетрудно поделитесь соображениями по этому поводу.Спасибо!Виталий.

• Скопировать ссылку
• Пожаловаться

11 мая 2021 в 10:32
Почему то не работает пример, бесконечная лента прекрасно работает.

Авторизуйтесь, чтобы добавить комментарий.

Другие публикации

В статье приведены основные примеры работы с расширением PHP PDO. Такие как подключение к БД, получение, изменение и.

AJAX позволяет отправить и получить данные без перезагрузки страницы. Например, делать проверку форм, подгружать контент и т.д. А функции JQuery значительно упрощают работу.

В больших формах, с несколькими кнопками «Отправить/сохранить» есть одна проблема – после ее отправки браузер обновит.

Кнопка «Показать ещё» на чистом JavaScript

Кнопка «Показать ещё» обычно применяется, когда у нас очень много контента и его нужно вывести не весь сразу, а постепенно (небольшими порциями). Для этого весь контент разбивается на страницы.

При этом сначала отображается только первая страница (на этом примере это две карточки) и кнопка «Загрузить ещё» . Если пользователь хочет посмотреть ещё записи ( следующую страницу ), то он просто нажимает на кнопку .

Это похоже на постраничную навигацию, но только предыдущие записи остаются на месте, а новые добавляются после них . При этом обычно это на сайте реализуется с использованием AJAX, то есть без перезагрузки страницы.

Шаг 1. Написание backend-кода на PHP

Перед тем как перейти к разработке frontend-кода, необходимо сначала написать серверный сценарий, который будет обрабатывать наш запрос и возвращать ответ в формате JSON. Можно конечно и в формате HTML, но это уже будет очень простой случай, который в рамках этой статьи рассматривать не будем.

Серверный сценарий напишем, например, на PHP. Кроме этого, не забываем, чтобы он работал необходимо установить веб-сервер с поддержкой PHP на локальную машину.

Для написания кода на PHP создадим файл, например, с именем more.php в корне сайта.

Данные в этом примере будем получать для простоты из подготовленного массива, а не из базы данных:

$items = [ [ 'title' => '. ', 'img' => '1.png', ], [ 'title' => '. ', 'img' => '2.png', ], // . ];

Количество записей на одной странице будем определять с помощью константы LIMIT :

const LIMIT = 2;

Сейчас у нас одна страница будет состоять из 2 записей. Всего записей (элементов в массиве) узнаем с помощью функции count :

$total = count($articles);

Номер страницы ( page ) будем передавать серверу через POST. В скрипте на PHP для получения этого значения воспользуемся глобальной переменной $_POST[‘page’] :

$page = (int)($_POST['page'] ?? 1);

Дополнительно на странице клиента будем отображать кроме самих данных ещё их оставшееся количество. Вычисление оставшегося количества записей будем выполнять следующим образом:

$remain = $total - $page * LIMIT;

Сами отдаваемые данные будем получать как срез массива с помощью array_slice :

$data = array_slice($items, ($page - 1) * LIMIT, LIMIT);

Кроме этого, клиенту будем передавать шаблон, который затем с помощью JavaScript будем использовать для генерации HTML-кода карточки:

$template =  
{{title}}