Auto Load More Data Dynamically on Page Scroll Using JQuery and PHP

Load More Data Dynamically on Page Scroll. Generally, we use pagination for fetch large database records. But it's boring for website visitors. So my suggestion to use page scroll load more data jquery concept. Most of the website following like facebook, twitter this kind of code.

Live Demo Download

Database Table

Create a table 'content_information' or run below SQL query in your PHPMyAdmin.

CREATE TABLE IF NOT EXISTS `content_information` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `title` varchar(60) NOT NULL,
  `description` text NOT NULL,
  PRIMARY KEY (`id`)
)

Config.php

Set mysqli database configuration, Fix limit for display records in index page $content_per_page

<?php
$db_username    = 'root';
$db_password    = '';
$db_name        = 'db_name';
$db_host        = 'localhost';
$content_per_page = 5;
$db = new mysqli($db_host, $db_username, $db_password,$db_name);
?>

HTML

Create index page write the mysqli query for fetch total record count in the table.

<html>
<head><body>
<?php
include("config.php");
$results = $db->query("SELECT COUNT(*) as tol_records FROM content_information");
$all_content = mysqli_fetch_array($results);
$total_data = ceil($all_content['tol_records']/$content_per_page);
$results->close(); 
?>
<ol id="results"></ol>
<div class="animation_image" style="display:none" align="center">
   <img src="ajax-loader.gif">
</div>
</body></html>

Jquery

$(window).scroll(function() - On load the page ajax via post the total record count to autoload.php

<script type="text/javascript" src="js/jquery-1.9.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var total_record = 0;
var total_groups = <?php echo $total_data; ?>;  
$('#results').load("autoload.php", {'group_no':total_record}, 
function() {total_record++;});
$(window).scroll(function() {       
if($(window).scrollTop() + $(window).height() == $(document).height())  
{           
    if(total_record <= total_groups)
    {
        loading = true; 
        $('.loader_image').show(); 
        $.post('autoload.php',{'group_no': total_record},
        function(data){ 
        if (data != "") {                               
            $("#results").append(data);                 
            $('.loader_image').hide();                  
            total_record++;
        }
        });     
    }
}
});
});
</script>

Autoload.php

Contains PHP code to load the data based on SQL limits. Data will append on #results

<?php
include("config.php"); 
if($_POST)
{
extract($_POST);
$start = ceil($group_no * $content_per_page);
$sql = $db->query("SELECT title,description FROM content_information 
ORDER BY id ASC LIMIT $start, $content_per_page");
while($row=mysqli_fetch_array($sql)) { ?>
    <li><strong><?php echo $row['title']; ?></strong>
    <br/><span class="page_message"><?php echo $row['description']; ?>
</span></li>
<?php   }
}
?>

Have a Question? Share your feedback below.

"Excellence is a continuous process and not an accident. "

- A. P. J. Abdul Kalam

Menu Link

30 November, 2015