Load More Results in PHP, Ajax from database

Abhigyan Singh 10th Oct 2020

This tutorial will show how to do load more results in PHP, MySQL, and ajax. It is very important in web development. This is another pagination technique without refreshing the page. Initially Facebook and Twitter use this technique to load more contents.

The main benefit of this load more results is that it is not refreshing the page or creating a new URL. By using Ajax we can call another set of results on the same page. So URL redirection will be easy in this technique.

Here, We will have mainly two file index.php and more_content.php. The first index page will load and show the content. When we will click "Load More Content" it will call Ajax and that Ajax calls more_content file. This process will so on up to the last record displayed.

Also Read This: (Download Pagination in PHP and MySql With Example)

index.php

<?php
include "dbConfig.php";

?>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript">
$(function() {

$('.more_button').live("click",function()
{
var getId = $(this).attr("id");
if(getId)
{
$("#load_more_"+getId).html('<img src="load_img.gif" style="padding:10px 0 0 100px;"/>');
$.ajax({
type: "POST",
url: "more_content.php",
data: "getLastContentId="+ getId,
cache: false,
success: function(html){
$("ul#load_more_ctnt").append(html);
$("#load_more_"+getId).remove();
}
});
}
else
{
$(".more_tab").html('The End');
}
return false;
});
});

</script>
<style>
body {
font:normal 14px tahoma, Arial, Helvetica, sans-serif;
margin:0;
padding:0;
}
a{text-decoration:none;}
.main_div{margin:30px 0 0 50px; width:580px }
ul.load_content{ margin:0; padding:0; list-style-type:none;}
ul.load_content li {
border-bottom: 1px solid #ddd;
color: #000000;
display: block;
font: 14px Arial,Helvetica,sans-serif;
padding: 10px 0 0 15px;
text-decoration: none;
}
.more_button {
background: none repeat scroll 0 0 #FFFFFF;
border: 1px solid #CCCCCC;
border-radius: 5px;
color: #000;
font-weight: bold;
height: auto;
line-height: 32px;
text-align: center;
text-transform: none;
}
.more_div{padding:10px;}
.all_loaded{font: bold 15px arial; color:#0D92E1; padding:20px 0 0 100px;}
</style>
</head>

<body>
<div class='main_div'>
<ul class="load_content" id="load_more_ctnt">
<?php
$sql=mysql_query("select id, content, url from table_name ORDER BY id DESC LIMIT 10");
while($row=mysql_fetch_array($sql))
{
$id=$row['id'];

$message=$row['content'];
?>
<li>
<a href="<?=$row['url']?>.htm"><?php echo $message; ?></a>
</li>
<?php } ?>
</ul>
<div class="more_div"><a href="#"><div id="load_more_<?php echo $id; ?>" class="more_tab">
<div class="more_button" id="<?php echo $id; ?>">Load More Content</div></a></div>
</div>
</div>
</body>
</html>

more_content.php

<?php
include "dbConfig.php";

if(isSet($_POST['getLastContentId']))
{
$getLastContentId=$_POST['getLastContentId'];
$result=mysql_query("select id, content, url from table_name where id <".$getLastContentId." order by id desc limit 10");
$count=mysql_num_rows($result);
if($count>0){
while($row=mysql_fetch_array($result))
{
$id=$row['id'];
$message=$row['content'];
?>
<li>
<a href="<?=$row['url']?>.htm"><?php echo $message; ?></a>
</li>
<?php
}
?>

<a href="#"><div id="load_more_<?php echo $id; ?>" class="more_tab">
<div id="<?php echo $id; ?>" class="more_button">Load More Content</div></a>
</div>

<?php
} else{
echo "<div class='all_loaded'>No More Content to Load</div>";
}
}
?>

That's all about "Load More Results" in php, MySQL, and Ajax.

Also Read This: (Download Pagination in PHP and MySql With Example)

If you have any queries regarding this, please feel free to ask in the comment section.

Authored By Abhigyan Singh

He is a continuous blogger and has blogged on different topic. He loves to surf Internet and always trying to get new Idea about new Technology and Innovations and sharing these great information to all the technology lovers.

Also on DiscussDesk