Несколько примеров, как сделать 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>При клике на кнопку отправляется 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
}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
}Пример в действии:
Во втором примере, 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>
Но есть вопрос: подгруженные данные приклике не выводятся в виде. Т.е. они выводятся, курсор их видит и при клике на их место происходит переход по их ссылке (в данном случае на страницу карточки товара).Я не сильно какой кодер. Всю голову сломал, но так и не понял причину.Запрос к DB - $products = \R::find('product', "LIMIT $start, $perpage");Если нетрудно поделитесь соображениями по этому поводу.Спасибо!Виталий.