Кнопка «Показать еще»

Несколько примеров, как сделать AJAX подгрузку записей из базы данных кликом на кнопку «Показать еще».

В тело страницы помещается PHP-скрипт, который выводит только первые три записи из таблицы `prods` и кнопку «Показать еще».

<?php
// Подключение к БД
$dbh = new PDO('mysql:dbname=db_name;host=localhost', 'логин', 'пароль');

// Получение записей для первой страницы
$sth = $dbh->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);
?>
	
<div id="showmore-list">
	<div class="prod-list">
		<?php foreach ($items as $row): ?>
		<div class="prod-item">
			<div class="prod-item-img">
				<img src="/images/<?php echo $row['img']; ?>" alt="">	
			</div>
			<div class="prod-item-name">
				<?php echo $row['name']; ?>		
			</div>
		</div>
		<?php endforeach; ?>
	</div>
</div>

<div class="showmore-bottom">
	<a data-page="1" data-max="<?php echo $amt; ?>" id="showmore-button" href="#">Показать еще</a>
</div>

<script src="/jquery/2.1.1/jquery.min.js"></script>

<script>
$(function(){
	$('#showmore-button').click(function (){
		var $target = $(this);
		var page = $target.attr('data-page');	
		page++;

		$.ajax({ 
			url: '/ajax.php?page=' + page,  
			dataType: 'html',
			success: function(data){
				$('#showmore-list .prod-list').append(data);
			}
		});

		$target.attr('data-page', page);
		if (page ==  $target.attr('data-max')) {
			$target.hide();
		}		

		return false;
	});
});
</script>
HTML

При клике на кнопку отправляется AJAX-запрос на скрипт ajax.php с GET-параметром page=2 (при следующим клике – page=3 и т.д.), скрипт возвращает следующие три записи, далее они вставляются в конец списка товаров методом jquery append(). Когда все записи показаны, кнопка скрывается.

Код ajax.php

<?php
// Кол-во элементов
$limit = 3; 

// Подключение к БД
$dbh = new PDO('mysql:dbname=db_name;host=localhost', 'логин', 'пароль');

// Получение записей для текущей страницы
$page = intval(@$_GET['page']);
$page = (empty($page)) ? 1 : $page;				
$start = ($page != 1) ? $page * $limit - $limit : 0;
$sth = $dbh->prepare("SELECT * FROM `prods` LIMIT {$start}, {$limit}");
$sth->execute();	
$items = $sth->fetchAll(PDO::FETCH_ASSOC);				

foreach ($items as $row) {
	?>
	<div class="prod-item">
		<div class="prod-item-img">
			<img src="/images/<?php echo $row['img']; ?>" alt="">	
		</div>
		<div class="prod-item-name">
			<?php echo $row['name']; ?>		
		</div>
	</div>
	<?php
}
PHP

CSS-стили:

/* Кнопка */
.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) {
	margin-right: 0
}
CSS

Пример в действии:

Во втором примере, AJAX-запрос отправляется сам на себя. Скрипт выводит записи в зависимости от значения переменной $_GET['page'], которое содержит номер страницы (скрипт основан на пагинаторе).

Стоит отметить, что данный пример избавляет от дублирования кода, но работает медленнее, т.к. через AJAX идет полный HTML-код страницы.

<?php
// Кол-во элементов на странице
$limit = 3; 

// Подключение к БД
$dbh = new PDO('mysql:dbname=db_name;host=localhost', 'логин', 'пароль');

// Получение записей для текущей страницы
$page = intval(@$_GET['page']);
$page = (empty($page)) ? 1 : $page;				
$start = ($page != 1) ? $page * $limit - $limit : 0;
$sth = $dbh->prepare("SELECT SQL_CALC_FOUND_ROWS * FROM `prods` LIMIT {$start}, {$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);	
?>
	
<div id="showmore-list">
	<div class="prod-list">
		<?php foreach ($items as $row): ?>
		<div class="prod-item">
			<div class="prod-item-img">
				<img src="/images/<?php echo $row['img']; ?>" alt="">	
			</div>
			<div class="prod-item-name">
				<?php echo $row['name']; ?>		
			</div>
		</div>
		<?php endforeach; ?>
	</div>
</div>

<div class="showmore-bottom">
	<a data-page="<?php echo $page; ?>" data-max="<?php echo $amt; ?>" id="showmore-button" href="#">Показать еще</a>
</div>

<script src="/jquery/2.1.1/jquery.min.js"></script>

<script>
$(function(){
	$('#showmore-button').click(function (){
		// Селектор контейнера с записями
		var selector = '#showmore-list .prod-list'; 

		var $target = $(this);
		var page = $target.attr('data-page');	
		page++;

		$.ajax({ 
			url: '?page=' + page,  
			dataType: 'html',
			success: function(data){
				$(selector).append($(data).find(selector).html());
			}
		});

		$target.attr('data-page', page);
		if (page ==  $target.attr('data-max')) {
			$target.hide();
		}		

		return false;
	});
});
</script>
HTML

Результат:

18.12.2020, обновлено 04.12.2021
12664

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

Виталий Кольга Виталий Кольга
26 января 2021 в 21:13
-3
Здравствуйте!Очень благодарен за Ваш пост!Я использую второй вариант Вашего кода. Архитектура моего приложения - MVC, работа с базой данных через ORM RedBeans. Кнопка Показать еще пропадает при полном выводе данных из таблицы.
Но есть вопрос: подгруженные данные приклике не выводятся в виде. Т.е. они выводятся, курсор их видит и при клике на их место происходит переход по их ссылке (в данном случае на страницу карточки товара).Я не сильно какой кодер. Всю голову сломал, но так и не понял причину.Запрос к DB - $products = \R::find('product', "LIMIT $start, $perpage");Если нетрудно поделитесь соображениями по этому поводу.Спасибо!Виталий.
Алина Хром Алина Хром
11 мая 2021 в 10:32
-3
Почему то не работает пример, бесконечная лента прекрасно работает.

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

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

Примеры использования PDO MySQL
В статье приведены основные примеры работы с расширением PHP PDO. Такие как подключение к БД, получение, изменение и...
64659
+2
Примеры отправки AJAX JQuery
AJAX позволяет отправить и получить данные без перезагрузки страницы. Например, делать проверку форм, подгружать контент и т.д. А функции JQuery значительно упрощают работу.
130014
+19
После отправки формы сохранить позицию скролла
В больших формах, с несколькими кнопками «Отправить/сохранить» есть одна проблема – после ее отправки браузер обновит...
6709
+2
Location – URL текущей страницы
Объект Location связан с адресной строкой браузера, в его свойствах содержатся все компоненты URL доступные для чтения...
25786
0
Показать/скрыть блок текста на jQuery
Примеры как на jQuery и показывать скрывать определенный текст по клику на ссылку или кнопку.
44709
+3
PHP-класс обертка для PDO
Класс значительно упрощает работу с PDO, сокращает код. Реализован на статических классах и не требует создание экземпляра класса.
15742
+8