При клике на кнопку отправляется AJAX-запрос на скрипт ajax.php с GET-параметром page=2 (при следующим клике – page=3 и т.д.), скрипт возвращает следующие три записи, далее они вставляются в конец списка товаров методом jquery append() . Когда все записи показаны, кнопка скрывается.
Код ajax.php
prepare("SELECT * FROM `prods` LIMIT , "); $sth->execute(); $items = $sth->fetchAll(PDO::FETCH_ASSOC); foreach ($items as $row) < ?>
Во втором примере, AJAX-запрос отправляется сам на себя. Скрипт выводит записи в зависимости от значения переменной $_GET[‘page’] , которое содержит номер страницы (скрипт основан на пагинаторе).
Стоит отметить, что данный пример избавляет от дублирования кода, но работает медленнее, т.к. через AJAX идет полный HTML-код страницы.
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); ?>
Показать еще
Результат:
Комментарии 2
Здравствуйте!Очень благодарен за Ваш пост!Я использую второй вариант Вашего кода. Архитектура моего приложения — MVC, работа с базой данных через ORM RedBeans. Кнопка Показать еще пропадает при полном выводе данных из таблицы. Но есть вопрос: подгруженные данные приклике не выводятся в виде. Т.е. они выводятся, курсор их видит и при клике на их место происходит переход по их ссылке (в данном случае на страницу карточки товара).Я не сильно какой кодер. Всю голову сломал, но так и не понял причину.Запрос к DB — $products = \R::find(‘product’, «LIMIT $start, $perpage»);Если нетрудно поделитесь соображениями по этому поводу.Спасибо!Виталий.
Авторизуйтесь, чтобы добавить комментарий.
Другие публикации
В статье приведены основные примеры работы с расширением PHP PDO. Такие как подключение к БД, получение, изменение и.
AJAX позволяет отправить и получить данные без перезагрузки страницы. Например, делать проверку форм, подгружать контент и т.д. А функции JQuery значительно упрощают работу.
В больших формах, с несколькими кнопками «Отправить/сохранить» есть одна проблема – после ее отправки браузер обновит.
Hello Visitors, In this blog, we are going to learn how to create a photo gallery with a load more button underneath it. I have shared many projects on HTML CSS, CSS animation examples, JavaScript, jQuery plugin implementation, CSS effects etc before in this blog. If you are interested, then check out those by clicking the load more button on the homepage. Now for this snippet, please follow the video tutorial first, then come back to get the code. We upload regular videos so if you want, subscribe to our YouTube channel for more front-end development-related videos.
I hope you have watched the tutorial and got some idea about today’s project. What we are trying to do here is to build an image gallery CSS with a load more button at the bottom. Initially, there will be three images but when we click on the ‘load more’ CSS button, six more images will appear. Usually, we can achieve this effect using JavaScript or jQuery. The effect will be more interactive than the project we are doing here. Here we have tried to make it possible using only HTML CSS.
To create this snippet, first, create an HTML file with a .html extension and then a CSS file with a .css extension. Please add the external CSS file to your HTML file. After that, please copy the code from the below code boxes and paste them into your project. If you are having a problem with the code, then download the source code from the button below.
I hope you have successfully implemented the code. If you like this snippet, then consider following us on our social media profiles. Please stay connected with this blog for more interesting projects soon. Thank you for visiting the blog.
При клике на кнопку отправляется AJAX-запрос на скрипт ajax.php с GET-параметром page=2 (при следующим клике – page=3 и т.д.), скрипт возвращает следующие три записи, далее они вставляются в конец списка товаров методом jquery append() . Когда все записи показаны, кнопка скрывается.
Код ajax.php
prepare("SELECT * FROM `prods` LIMIT , "); $sth->execute(); $items = $sth->fetchAll(PDO::FETCH_ASSOC); foreach ($items as $row) < ?>
Во втором примере, AJAX-запрос отправляется сам на себя. Скрипт выводит записи в зависимости от значения переменной $_GET[‘page’] , которое содержит номер страницы (скрипт основан на пагинаторе).
Стоит отметить, что данный пример избавляет от дублирования кода, но работает медленнее, т.к. через AJAX идет полный HTML-код страницы.
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); ?>
Показать еще
Результат:
Комментарии 2
Здравствуйте!Очень благодарен за Ваш пост!Я использую второй вариант Вашего кода. Архитектура моего приложения — MVC, работа с базой данных через ORM RedBeans. Кнопка Показать еще пропадает при полном выводе данных из таблицы. Но есть вопрос: подгруженные данные приклике не выводятся в виде. Т.е. они выводятся, курсор их видит и при клике на их место происходит переход по их ссылке (в данном случае на страницу карточки товара).Я не сильно какой кодер. Всю голову сломал, но так и не понял причину.Запрос к DB — $products = \R::find(‘product’, «LIMIT $start, $perpage»);Если нетрудно поделитесь соображениями по этому поводу.Спасибо!Виталий.
Авторизуйтесь, чтобы добавить комментарий.
Другие публикации
В статье приведены основные примеры работы с расширением PHP PDO. Такие как подключение к БД, получение, изменение и.
AJAX позволяет отправить и получить данные без перезагрузки страницы. Например, делать проверку форм, подгружать контент и т.д. А функции JQuery значительно упрощают работу.
В больших формах, с несколькими кнопками «Отправить/сохранить» есть одна проблема – после ее отправки браузер обновит.
Dynamically shortened Text with “Show More” link using jQuery
Update: The plugin is now on GitHub: https://github.com/viralpatel/jquery.shorten Facebook user updates has a great functionality. If the comment text is larger than few characters, the extra words are hide and a show more link is presented to user. This way you can keep long text out of the view to user and stop the cluttering of page. Also interested users can click on more link and see the full content. Here is a simple tutorial to achieve this using jQuery / Javascript.
The HTML
Below is the sample text. Each text is wrapped in a DIV tag. Note that we have added a class “more” in each div. This class will decide if a text needs to be shortened and show more link showed or not.
divclass="comment more"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum laoreet, nunc eget laoreet sagittis, quam ligula sodales orci, congue imperdiet eros tortor ac lectus. Duis eget nisl orci. Aliquam mattis purus non mauris blandit id luctus felis convallis. Integer varius egestas vestibulum. Nullam a dolor arcu, ac tempor elit. Donec. div> divclass="comment more"> Duis nisl nibh, egestas at fermentum at, viverra et purus. Maecenas lobortis odio id sapien facilisis elementum. Curabitur et magna justo, et gravida augue. Sed tristique pellentesque arcu quis tempor. div> divclass="comment more"> consectetur adipiscing elit. Proin blandit nunc sed sem dictum id feugiat quam blandit. Donec nec sem sed arcu interdum commodo ac ac diam. Donec consequat semper rutrum. Vestibulum et mauris elit. Vestibulum mauris lacus, ultricies. div>
Code language:HTML, XML(xml)
The CSS
Below is the CSS code for our example. Note the class “.morecontent span” is hidden. The extra text from the content is wrapped in this span and is hidden at time of page loading.
showChar: Total characters to show to user. If the content is more then showChar, it will be split into two halves and first one will be showed to user.
ellipsestext: The text displayed before “more” link. Default is “…”
moretext: The text shown in more link. Default is “more”. You can change to “>>”
lesstext: The text shown in less link. Default is “less”. You can change to “
Update
The above code is modified into jQuery plugin. Also it has now been enhanced. HTML tags are now parsed properly within text to preserve its uniformity while shorting the text. Please check latest plugin code on GitHub. https://github.com/viralpatel/jquery.shorten
Download Source Code
jQuery Plugin
Code
/* * jQuery Shorten plugin 1.0.0 * * Copyright (c) 2013 Viral Patel * //www.viralpatel.net * * Dual licensed under the MIT license: * http://www.opensource.org/licenses/mit-license.php */ (function($) < $.fn.shorten = function (settings) < var config = < showChars: 100, ellipsesText: ". ", moreText: "more", lessText: "less" >; if (settings) < $.extend(config, settings); >$(document).off("click", '.morelink'); $(document).on(click: function ( ) < var $this = $(this); if ($this.hasClass('less')) < $this.removeClass('less'); $this.html(config.moreText); > else < $this.addClass('less'); $this.html(config.lessText); > $this.parent().prev().toggle(); $this.prev().toggle(); returnfalse; > >, '.morelink'); returnthis.each(function ( ) < var $this = $(this); if($this.hasClass("shortened")) return; $this.addClass("shortened"); var content = $this.html(); if (content.length > config.showChars) < var c = content.substr(0, config.showChars); var h = content.substr(config.showChars, content.length - config.showChars); var html = c + '' + config.ellipsesText + '' + h + ' ' + config.moreText + ''; $this.html(html); $(".morecontent span").hide(); > >); >; >)(jQuery);
Step 2: Add the code to shorten any DIV content. In below example we are shortening DIV with class “comment”.
divclass="comment"> This is a long comment text. This is a long comment text. This is a long comment text. This is a long comment text. This is a long comment text. div> scripttype="text/javascript"> $(document).ready(function( ) < $(".comment").shorten(); >); script>
