Load Data While Page Scroll with jQuery

Now a days data load while page scroll technique is mostly used by most of successful websites like Facebook, Google and Twitter. While you scroll down the page loads more and more data, using Ajax request this is called infinity scroll. So, Today I am going to show you how to load data while page scroll with jQuery and PHP using jQuery’s plugin.

There are some jQuery method available to load more data like jQuery.ajax or jQuery.load but jQuery plugin Infinite Ajax Scroll is available to make it more easy. I will show you a simple example in which a pagination of PHP and MySQL will turn into dynamic infinite scroll.

Database:
First we need to create a database to store some like some short fun stories and the structure for the table is like below:

CREATE TABLE IF NOT EXISTS `stories` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `title` varchar(250) NOT NULL,
  `desc` text NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1

DB Config:
After creating database we need to add database configuration in config.php file looks like below:

// Database configs
$host="localhost";
$dbuser="root";
$dbpass="";
$dbname = "simpledb"; 

// item per page
$limit = 5; 

// db connect
$link = mysqli_connect($host, $dbuser, $dbpass, $dbname);

if (mysqli_connect_errno())
	echo mysqli_connect_error();

Pagination:
Now we need to create a HTML and PHP script to fetch data from table and display stories like below:

<?php

include('config.php');

$page =(int)(!isset($_GET['p']))?1: $_GET['p'];

// sql query
$sql ="SELECT * FROM stories ORDER BY id DESC";

// find out query stat point
$start =($page * $limit)- $limit;

// query for page navigation
if( mysqli_num_rows(mysqli_query($link, $sql))>($page * $limit)){
  $next =++$page;
}

$query = mysqli_query($link, $sql ." LIMIT {$start}, {$limit}");
if(mysqli_num_rows($query)<1){
	echo 'Page not found!';
	exit();
}
?>
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type"content="text/html; charset=UTF-8">
<title>Load Data While Page Scroll with jQuery and PHP</title>
</head>
<body>
<div class="wrap">
	<h1><a href="#">Load Data While Page Scroll with jQuery and PHP</a></h1>

	<!-- loop row data -->
	<?php while($row = mysqli_fetch_array($query)):?>
		<div class="item" id="item-<?php echo $row['id']?>">
			<h2><?php echo $row['title'] ?></h2>
			<p><?php echo $row['desc']?></p>
		</div>
	<?php endwhile?>

	<!--page navigation-->
	<?php if(isset($next)):?>
		<div class="nav">
			<a href='index.php?p=<?php echo $next?>'>Next</a>
		</div>
	<?php endif ?>
	</div>
</body>
</html>

jQuery Part:
Now we need to include jQuery and jQuery Infinite Ajax Scroll Library and need to configure the jQuery.ias like below:

<script src="../js/jquery-2.0.min.js"></script>
<script type="text/javascript"src="../js/jquery-ias.js"></script>
<script type="text/javascript">
  jQuery(document).ready(function(){
	// Infinite Ajax Scroll configuration
	jQuery.ias({
	  container :'.wrap', // main container where data goes to append
	  item:'.item', // single items
	  pagination:'.nav', // page navigation
	  next:'.nav a' // next page selector
	})
	.extension(new IASSpinnerExtension())
	.extension(new IASTriggerExtension({offset: 3}));
});
</script>

LIVE DEMO

This is a simple example of load data while page scroll with jQuery and PHP. Hope this will help you.

Related Tutorials