Tuesday, September 3, 2013

ajax data load while scroll endless scroll infinite scroll javascript jquery page load while scroll PHP Data Load While Page Scrolling (infinite scroll) with jQuery PHP and MySQL

Data Load While Page Scrolling (infinite scroll) with jQuery PHP and MySQL

by Resalat Haque on 9:47 AM in ajax, data load while scroll, endless scroll, infinite scroll, javascript, jquery, page load while scroll, PHP

Infinity scroll is a way to load more data using Ajax request while page goes to scroll down. Now days this technique is mostly used by the most of the successful websites like Facebook, Google and Twitter. You will be see that on these web sites as long as you scrolling down the page loads more and more data or posts, that is called infinity scroll or endless scroll. Though it can be possible by using jQuery's jQuery.ajax or jQuery.load method but now days there are many jQuery plugins (like, Infinity Scroll, Infinite Ajax Scroll) are available to make it more easy. Today I am going to show you how we can turn a PHP and MySQL paginavigation based website into dynamic infinity scroll with jQuery Infinite Ajax Scroll plugin.

Live Demo Download

Database Structure

First we need to create a database table. Because, we need some large amount of data to make this demo up and run here I am using Sakila simple database's actor_info table. The structure of this table looks like....

CREATE TABLE `actor_info` (
  `id` int(5) NOT NULL AUTO_INCREMENT,
  `first_name` varchar(45) NOT NULL,
  `last_name` varchar(45) NOT NULL,
  `film_info` text NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

DB Configuration

The config.php file is responsible for database connect. I also include a variable named $limit with value of 10. It is the number of content you want to show on per page. You can increase or decrease this number as you want.

# db configuration 
define('DB_HOST', 'localhost');
define('DB_USER', 'root');
define('DB_PASS', 'root');
define('DB_NAME', 'dbname');

$limit = 10; #item per page
# db connect
$link = mysql_connect(DB_HOST, DB_USER, DB_PASS) or die('Could not connect to MySQL DB ') . mysql_error();
$db = mysql_select_db(DB_NAME, $link);

PHP and HTML

Take a look at the PHP and HTML code, this PHP code retrieves data from MySQL database with simple pagination.

<?php
include('config.php');
$page = (int) (!isset($_GET['p'])) ? 1 : $_GET['p'];
# sql query
$sql = "SELECT * FROM actor_info ORDER BY id DESC";
# find out query stat point
$start = ($page * $limit) - $limit;
# query for page navigation
if( mysql_num_rows(mysql_query($sql)) > ($page * $limit) ){
  $next = ++$page;
}
$query = mysql_query( $sql . " LIMIT {$start}, {$limit}");
if (mysql_num_rows($query) < 1) {
  header('HTTP/1.0 404 Not Found');
  echo 'Page not found!';
  exit();
}
?>
<!doctype html>
<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>jQuery Load While Scroll</title>
</head>
<body>
<div class="wrap">
  <h1><a href="#">Data load while scroll</a></h1>

  <!-- loop row data -->
  <?php while ($row = mysql_fetch_array($query)): ?>
  <div class="item" id="item-<?php echo $row['id']?>">
    <h2>
      <span class="num"><?php echo $row['id']?></span>
      <span class="name"><?php echo $row['first_name'].' '.$row['last_name']?></span>
    </h2>
    <p><?php echo $row['film_info']?></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><!--.wrap-->
</body>
</html>

JavaScript part

In the JavaScript section we need to first include jQuery and Infinity Ajax Scroll library. In the second pert we need to call jQuery.ias method and configure it. Take a look on the comments

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-ias.min.js"></script>
<script type="text/javascript">
  $(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
      loader: '<img src="css/ajax-loader.gif"/>', // loading gif
      triggerPageThreshold: 3 // show load more if scroll more than this
    });
  });
</script>