Load More Results in PHP, Ajax from database

Here, We will have mainly two file index.php and more_content.php. 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 upto 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="http://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, Ajax.

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

If you have any query regarding this, Please feel free to ask in comment section.

Share this Article on Social Media

All of my Scripts are ready to customized as per your requirement. Feel free to contact for script customization.

Contact me at discussdesk@gmail.com

"Note : It will be charged as per your customization requirement :)"

Get Updates, Scripts & Other Tutorials to Directly to your Email

Over 20000+ Happy Readers already subscribed. (We don't send spam email). Every email subscriber can get our latest updates and download our 100+ scripts.

Comments