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

задался вопросом реализации в своем скрипте кнопки Показать еще на php и jQuery. Помог этот код. Думаю кому то пригодится.

  1. <?php
  2. // Кол-во элементов на странице
  3. $limit = 3;
  4.  
  5. // Подключение к БД
  6. $dbh = new PDO('mysql:dbname=db_name;host=localhost', 'логин', 'пароль');
  7.  
  8. // Получение записей для текущей страницы
  9. $page = intval(@$_GET['page']);
  10. $page = (empty($page)) ? 1 : $page;
  11. $start = ($page != 1) ? $page * $limit - $limit : 0;
  12. $sth = $dbh->prepare("SELECT SQL_CALC_FOUND_ROWS * FROM `prods` LIMIT {$start}, {$limit}");
  13. $sth->execute();
  14. $items = $sth->fetchAll(PDO::FETCH_ASSOC);
  15.  
  16. // Узнаем сколько всего записей в БД
  17. $sth = $dbh->prepare("SELECT FOUND_ROWS()");
  18. $sth->execute();
  19. $total = $sth->fetch(PDO::FETCH_COLUMN);
  20. $amt = ceil($total / $limit);
  21. ?>
  22.  
  23. <div id="showmore-list">
  24. <div class="prod-list">
  25. <?php foreach ($items as $row): ?>
  26. <div class="prod-item">
  27. <div class="prod-item-img">
  28. <img src="/images/<?php echo $row['img']; ?>" alt="">
  29. </div>
  30. <div class="prod-item-name">
  31. <?php echo $row['name']; ?>
  32. </div>
  33. </div>
  34. <?php endforeach; ?>
  35. </div>
  36. </div>
  37.  
  38. <div class="showmore-bottom">
  39. <a data-page="<?php echo $page; ?>" data-max="<?php echo $amt; ?>" id="showmore-button" href="#">Показать еще</a>
  40. </div>
  41.  
  42. <script src="/jquery/2.1.1/jquery.min.js"></script>
  43.  
  44. <script>
  45. $(function(){
  46. $('#showmore-button').click(function (){
  47. // Селектор контейнера с записями
  48. var selector = '#showmore-list .prod-list';
  49.  
  50. var $target = $(this);
  51. var page = $target.attr('data-page');
  52. page++;
  53.  
  54. $.ajax({
  55. url: '?page=' + page,
  56. dataType: 'html',
  57. success: function(data){
  58. $(selector).append($(data).find(selector).html());
  59. }
  60. });
  61.  
  62. $target.attr('data-page', page);
  63. if (page == $target.attr('data-max')) {
  64. $target.hide();
  65. }
  66.  
  67. return false;
  68. });
  69. });
  70. </script>


  20.04.24 / 17:53 | PHP |   178 | 8   1