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

30 November, 2015

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, twiter this kind of code. 

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


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 mysqli query for fetch total record count in 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








Related Topics

4 comments:

  1. Undefined variable $content_per_page

    ReplyDelete
  2. check your config file $content_per_page = 5;

    ReplyDelete
  3. jquery is not loading the content. It show only 5 results.

    ReplyDelete