How to Create Load More Button from database using php, jquery

Authors: CodeToday | PHP Code | Views: 408 | Posted: 03 AM: 10/04/2017

Next post How to make a page scroll down automatically load data from Mysql Database using PHP, jQuery.  In this article I will guide you how to load the data when click Load More Button, this will be best for users who want to see more proactively, data is only displayed when the user wants to click.

PHP Full Source Code

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>How to Create Load More Button from database using php, jquery</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</head>
<body>
<div class="container">
<h1 class="text-primary">How to Create Load More Button from database using php, jquery</h1>
<script type="text/javascript">
$(document).ready(function(){
 $("#load").click(function(){
  load_more();
 });
});
function load_more()  {
	var val = document.getElementById("next_content").value;
    $.ajax({
		type: 'post',
		url: 'load_more.php',
		data: {
				page:val
		},
    success: function (response) {
		var content = document.getElementById("first_content");
		content.innerHTML = content.innerHTML+response;
		document.getElementById("next_content").value = Number(val)+2;
    }
    });
}
</script>
<?
include 'connect.php';
echo '<div id="first_content">';
$sql = mysql_query("SELECT title, short FROM load_more LIMIT 0,3");
while($row = mysql_fetch_array($sql)){
	
  	echo "<h3 class='text-primary'>".$row['title']."</h3>";
	echo '<p>'.$row['short'].'</p>';
		
} mysql_free_result($sql);
echo '</div>';
echo '<input type="hidden" id="next_content" value="5">';
echo '<input type="button" id="load" value="Load More">';
?>
</div>
</body>
</html> 

Mysql database

mysql_query("DROP TABLE IF EXISTS `load_more`;
CREATE TABLE `load_more` (
  `id` int(11) NOT NULL auto_increment,
  `title` varchar(255) collate utf8_unicode_ci default NULL,
  `short` text collate utf8_unicode_ci,
  `status` enum('false','true') collate utf8_unicode_ci default 'true',
  PRIMARY KEY  (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=16 DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;");

connect.php

<?
mysql_connect("localhost", "root", "admin") or die("Could not connect"); 
mysql_select_db("code") or die("Could not select database"); 
?>

load_more.php

<?php
include 'connect.php';
$page = $_POST['page'];
if(isset($page )) {
    
$sql = mysql_query("SELECT title, short FROM load_more LIMIT $page,2");
while($row = mysql_fetch_array($sql))    {
	
	echo "<h3 class='text-primary'>".$row['title']."</h3>";
	echo '<p>'.$row['short'].'</p>';
		
} mysql_free_result($sql);
}  
?>

The result will be as shown below:

How to Create Load More Button from database using php, jquery


If you have any questions, please leave a message below