Data auto Load While scrolling page down with jquery PHP and MySQL

Data auto Load While scrolling page down with jquery PHP and MySQL

In this Post We Will Explain About is Data auto Load While scrolling page down with jquery PHP and MySQL With Example and Demo.Welcome on Pakainfo.com – Examples, The best For Learn web development Tutorials,Demo with Example! Hi Dear Friends here u can know to Data Load While Page Scroll with jQuery PHP and MySQLExample

In this post we will show you Best way to implement load data dynamically on page scroll using jquery ajax and php, hear for Data auto Load While Page Scroll down with jQuery PHP and MySQLwith Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.

Also Read :  Codeigniter File Download Helper - Download file from database - URL using Server

File Structure List

Index.php
do_result_data.php
get_data_list.js

create a table structure

CREATE TABLE IF NOT EXISTS `postdata` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`comments` longtext NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;

Create Database Connection – db_connect.php

<?php
$host_servername = "localhost";
$username = "root";
$password = "";
$dbname = "pakainfo";
$dbcon = mysqli_connect($host_servername, $username, $password, $dbname);
if (mysqli_connect_errno()) {
	printf("simple Pakainfo.com - > Connect failed: %s\n", mysqli_connect_error());
	exit();
}
?>

Include External Libs

<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="bootstrap-theme.min.css">
<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
<script type="text/javascript" src="get_data_list.js"></script>

index.php

<div class="container">
<h2>Example: Simple Data Load While Page Scroll steps with jQuery PHP and MySQL Devloped By Pakainfo.com</h2>
	<div id="results">
		<?php include('do_result_data.php'); ?>
	</div>
<div id="id_loader" style="text-align:center;"><img src="id_loader.gif" /></div>
</div>

get_data_list.js

$(document).ready(function(){
	$(window).scroll(function(){
	if ($(window).scrollTop() == $(document).height() - $(window).height()){
		if($(".total_nopage:last").val() <= $(".get_total_rec").val()) {
			var nopage = parseInt($(".total_nopage:last").val()) + 1;
			loadRecord('do_result_data.php?get_page='+nopage);
			}
		}
	});
});
function loadRecord(url) {
	$.ajax({
		url: url,
		type: "GET",
		data: {get_total_rec:$("#get_total_rec").val()},
		beforeSend: function(){
			$('#id_loader').show();
		},
		complete: function(){
			$('#id_loader').hide();
		},
		success: function(data){
			$("#results").append(data);
		},
		error: function(){}
	});
}

do_result_data.php

<?php
include_once("db_connect.php");
$perPage = 3;
$sql_query = "SELECT id, comments FROM postdata";
$get_page = 1;
	if(!empty($_GET["get_page"])) {
	$get_page = $_GET["get_page"];
	}
$first = ($get_page-1)*$perPage;
	if($first < 0) $first = 0;
	$query = $sql_query . " limit " . $first . "," . $perPage;
	$query_results = mysqli_query($dbcon, $query) or die("database error:". mysqli_error($dbcon));
	$records = mysqli_fetch_assoc($query_results);
	if(empty($_GET["get_total_rec"])) {
	$_GET["get_total_rec"] = mysqli_num_rows($query_results);
	}
$msgdis = '';
	if(!empty($records)) {
		$msgdis .= '<input type="hidden" class="total_nopage" value="' . $get_page . '" />';
		$msgdis .= '<input type="hidden" class="get_total_rec" value="' . $_GET["get_total_rec"] . '" />';
			while( $rows = mysqli_fetch_assoc($query_results) ) {
			$msgdis .= '<div class="well">' .$rows["comments"] . '</div>';
			}
	}
	echo $msgdis;
?>

Example

Also Read :  Difference Between Get and Post Method

I hope you have Got What is load data while scrolling page down with jquery and php And how it works.I would Like to have FeadBack From My Blog(Pakainfo.com) readers.Your Valuable FeadBack,Any Question,or any Comments abaout This Article(Pakainfo.com) Are Most Always Welcome.

Recommended For You.

Eloquent Insert Multiple Records in Laravel
Today, We want to share with you Eloquent Insert Multiple Records in Laravel.In this post we will show you Insert