adding the pagination link to the list<\/a>, we will integrate Show More technique to load posts data dynamically using jQuery, Ajax, PHP, and MySQL.<\/p>\nOur Ajax based load more results with jQuery tutorial make the whole process simple. Let’s start the load more data from database<\/b> tutorial.<\/p>\nCreate Database Table<\/h2>\n
To store the post information a table needs to be created in the database. The following SQL creates an posts<\/code> table with some basic fields in the MySQL database.<\/p>\nCREATE<\/span> TABLE<\/span> `posts<\/span>` (\r\n `id`<\/span> int<\/span>(11<\/span>) NOT NULL<\/span> AUTO_INCREMENT,\r\n `title`<\/span> varchar<\/span>(255<\/span>) COLLATE utf8_unicode_ci NOT NULL<\/span>,\r\n `created`<\/span> datetime NOT NULL<\/span>,\r\n `modified`<\/span> datetime NOT NULL<\/span>,\r\n `status`<\/span> enum('1'<\/span>,'0'<\/span>) COLLATE utf8_unicode_ci NOT NULL<\/span> DEFAULT '1'<\/span> COMMENT '1=Active, 0=Inactive'<\/span>,\r\n PRIMARY KEY<\/span> (`id`<\/span>)\r\n) ENGINE=<\/span>InnoDB DEFAULT CHARSET=<\/span>utf8 COLLATE=<\/span>utf8_unicode_ci;\r\n<\/pre>\nDatabase Configuration (dbConfig.php)<\/h2>\n
The dbConfig.php file is used to connect and select the MySQL database. Specify the database hostname ($dbHost<\/code>), username ($dbUsername<\/code>), password ($dbPassword<\/code>), and name ($dbName<\/code>) as per your MySQL credentials.<\/p>\n<?php
<\/span>\/\/ Database configuration
<\/span>$dbHost <\/span>= <\/span>\"localhost\"<\/span>;
<\/span>$dbUsername <\/span>= <\/span>\"root\"<\/span>;
<\/span>$dbPassword <\/span>= <\/span>\"root\"<\/span>;
<\/span>$dbName <\/span>= <\/span>\"codexworld\"<\/span>;
<\/span>\/\/ Create database connection
<\/span>$db <\/span>= new <\/span>mysqli<\/span>(<\/span>$dbHost<\/span>, <\/span>$dbUsername<\/span>, <\/span>$dbPassword<\/span>, <\/span>$dbName<\/span>);
<\/span>\/\/ Check connection
<\/span>if (<\/span>$db<\/span>-><\/span>connect_error<\/span>) {
die(<\/span>\"Connection failed: \" <\/span>. <\/span>$db<\/span>-><\/span>connect_error<\/span>);
}
<\/span>?><\/span><\/pre>\nData List with Show More (index.php)<\/h2>\n
In this page, the posts data will be retrieved from the MySQL database and listed with the Load More button in the web page.<\/p>\n
HTML & PHP Code:<\/b>
\nAt first include the database configuration file (dbConfig.php<\/code>). Now, fetch some limited data from the posts table and list them with Show More button.<\/p>\n<div<\/span> class<\/span>=\"postList\"<\/span>>\r\n <?php
<\/span>\/\/ Include the database configuration file
<\/span>include <\/span>'dbConfig.php'<\/span>;
<\/span>\/\/ Get records from the database
<\/span>$query <\/span>= <\/span>$db<\/span>-><\/span>query<\/span>(<\/span>\"SELECT * FROM posts ORDER BY id DESC LIMIT 2\"<\/span>);
if(<\/span>$query<\/span>-><\/span>num_rows <\/span>> <\/span>0<\/span>){
while(<\/span>$row <\/span>= <\/span>$query<\/span>-><\/span>fetch_assoc<\/span>()){
<\/span>$postID <\/span>= <\/span>$row<\/span>[<\/span>'id'<\/span>];
<\/span>?><\/span>\r\n <div<\/span> class<\/span>=\"list_item\"<\/span>><?php <\/span>echo <\/span>$row<\/span>[<\/span>'title'<\/span>]; <\/span>?><\/span><\/div<\/span>>\r\n <?php <\/span>} <\/span>?><\/span>\r\n <div<\/span> class<\/span>=\"show_more_main\"<\/span> id<\/span>=<\/span>\"show_more_main<?php <\/span>echo <\/span>$postID<\/span>; <\/span>?><\/span>\"<\/span>>\r\n <span<\/span> id<\/span>=<\/span>\"<?php <\/span>echo <\/span>$postID<\/span>; <\/span>?><\/span>\"<\/span> class<\/span>=\"show_more\"<\/span> title<\/span>=\"Load more posts\"<\/span>>Show more<\/span<\/span>>\r\n <span<\/span> class<\/span>=\"loding\"<\/span> style<\/span>=\"display: none;\"<\/span>><span<\/span> class<\/span>=\"loding_txt\"<\/span>>Loading...<\/span<\/span>><\/span<\/span>>\r\n <\/div<\/span>>\r\n <?php <\/span>} <\/span>?><\/span>\r\n<\/div<\/span>>\r\n<\/pre>\nJavaScript Code:<\/b>
\nThe jQuery is used to load more data from the database without page refresh, include the jQuery library first.<\/p>\n<script<\/span> src<\/span>=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.3.1\/jquery.min.js\"<\/span>><\/script<\/span>>\r\n<\/pre>\nThe following jQuery uses Ajax ($.ajax<\/code>) to get more data from ajax_more.php<\/code> file and listed them under the postList<\/code> div.<\/p>\n<script<\/span> type<\/span>=\"text\/javascript\"<\/span>>\r\n$<\/span>(document<\/span>).ready<\/span>(function<\/span>(){\r\n $<\/span>(document<\/span>).on('click'<\/span>,'.show_more'<\/span>,function<\/span>(){\r\n var<\/span> ID =<\/span> $<\/span>(this<\/span>).attr<\/span>('id'<\/span>);\r\n $<\/span>('.show_more<\/span>').hide<\/span>();\r\n $<\/span>('.loding<\/span>').show<\/span>();\r\n $<\/span>.ajax<\/span>({\r\n type:'POST'<\/span>,\r\n url:'ajax_more-without-design.php'<\/span>,\r\n data:'id='<\/span>+<\/span>ID,\r\n success<\/span>:function<\/span>(html){\r\n $<\/span>('#show_more_main<\/span>'+<\/span>ID).remove<\/span>();\r\n $<\/span>('.postList<\/span>').append<\/span>(html);\r\n }\r\n });\r\n });\r\n});\r\n<\/script<\/span>>\r\n<\/pre>\nLoad More Data (ajax_more.php)<\/h2>\n
The ajax_more.php<\/code> file is called by the Ajax request and it handles load more data functionality.<\/p>\n