Online web solution: Infinte scrolling in php

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 test simple database's actor_info table. The structureof 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 $limitwith 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>

Online web solution

Tuesday, 26 November 2013

Infinte scrolling in php

Database Structure

DB CONFIGURATION

PHP and HTML

JavaScript part

No comments: