Scroll Pagination in Codeigniter using Ajax

Kailash Singh

Scroll Pagination in Codeigniter using Ajax

Published Jan 12,2021 by Kailash Singh

0 Comment     44 Views    


In this tutorial, we are going to teach you, how to create Scroll Pagination in Codeigniter using Ajax.

 

Step 1 : Create product table in database.

CREATE TABLE `elevenstech_tutorial`.`products` ( `id` INT NOT NULL AUTO_INCREMENT , `image` VARCHAR(300) NOT NULL , `title` VARCHAR(300) NOT NULL , `description` TEXT NOT NULL , PRIMARY KEY (`id`)) ENGINE = InnoDB;

 

Step 2 : Insert some products details in product table.

INSERT INTO `products` (`id`, `image`, `title`, `description`) VALUES (NULL, 'image1.jpg', 'Product 1', 'Reference site about Lorem Ipsum, giving information on its origins, as well as a random Lipsum generator.'), (NULL, 'image2.jpg', 'Product 2', 'Reference site about Lorem Ipsum, giving information on its origins, as well as a random Lipsum generator.'), (NULL, 'image3.jpg', 'Product 3', 'Reference site about Lorem Ipsum, giving information on its origins, as well as a random Lipsum generator.'), (NULL, 'image4.jpg', 'Product 4', 'Reference site about Lorem Ipsum, giving information on its origins, as well as a random Lipsum generator.'), (NULL, 'image5.jpg', 'Product 5', 'Reference site about Lorem Ipsum, giving information on its origins, as well as a random Lipsum generator.'), (NULL, 'image6.jpg', 'Product 6', 'Reference site about Lorem Ipsum, giving information on its origins, as well as a random Lipsum generator.'), (NULL, 'image7.jpg', 'Product 7', 'Reference site about Lorem Ipsum, giving information on its origins, as well as a random Lipsum generator.'), (NULL, 'image8.jpg', 'Product 8', 'Reference site about Lorem Ipsum, giving information on its origins, as well as a random Lipsum generator.'), (NULL, 'image9.jpg', 'Product 9', 'Reference site about Lorem Ipsum, giving information on its origins, as well as a random Lipsum generator.'), (NULL, 'image10.jpg', 'Product 10', 'Reference site about Lorem Ipsum, giving information on its origins, as well as a random Lipsum generator.');

 

Step 3 :  Go to your view folder and create product.php so that we will load the products.

<!DOCTYPE html>
<html>
  <head>
    <title>Elevenstech Wen Tutorials</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <style>

      .card{
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 3px;
        box-shadow: 0px 0px 10px 0px #ccc;
        margin-bottom: 20px;
      }

      @-webkit-keyframes shadingCard {
        0% {
          background-position: -468px 0;
        }
        100% {
          background-position: 468px 0;
        }
      }

      @keyframes shadingCard {
        0% {
          background-position: -468px 0;
        }
        100% {
          background-position: 468px 0;
        }
      }

      .content-placeholder {
        display: inline-block;
        -webkit-animation-duration: 1s;
        animation-duration: 1s;
        -webkit-animation-fill-mode: forwards;
        animation-fill-mode: forwards;
        -webkit-animation-iteration-count: infinite;
        animation-iteration-count: infinite;
        -webkit-animation-name: shadingCard;
        animation-name: shadingCard;
        -webkit-animation-timing-function: linear;
        animation-timing-function: linear;
        background: #f6f7f8;
        background: -webkit-gradient(linear, left top, right top, color-stop(8%, #eeeeee), color-stop(18%, #dddddd), color-stop(33%, #eeeeee));
        background: -webkit-linear-gradient(left, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
        background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
        -webkit-background-size: 800px 104px;
        background-size: 800px 104px;
        height: inherit;
        position: relative;
      }

  
    </style>
  </head>
  <body>
    <div class="container">
          <h2 align="center">
            Elevenstech Wen Tutorials<br>
            Scroll Pagination in Codeigniter using Ajax
          </h2>
          <br>
          
          <!-- Load products -->
          <div id="load_product"></div>

          <!--Show Dummy cards until the products are loaded -->
          <div id="load_product_message"></div>
          
      </div>
  </body>
</html>
<script>
  $(document).ready(function(){

    var action = 'inactive';
    var limit = 20;
    var start = 0;
    

    //here i am showing dummy cards of product
    function lazy_loader(limit)
    {
      var output = '';
      output += '<div class="row">';
      for(var count=0; count<limit; count++)
      {
        output += '<div class="col-sm-3">';
        output += '<div class="card">';
        output += '<p><span class="content-placeholder" style="width:100%; height: 250px;">&nbsp;</span></p>';
        output += '<p><span class="content-placeholder" style="width:100%; height: 25px;">&nbsp;</span></p>';
        output += '<p><span class="content-placeholder" style="width:100%; height: 50px;">&nbsp;</span></p>';
        output += '</div>';
        output += '</div>';
      }
      output += '</div>';
      $('#load_product_message').html(output);
    }

    //call lazy loader
    lazy_loader(limit);

    //create function of load product and then fetching products from database using ajax
    function load_product(limit, start)
    {
      $.ajax({
        url:"<?php echo base_url(); ?>product/fetch_product",
        method:"POST",
        data:{limit:limit, start:start},
        cache: false,
        success:function(data)
        {
          if(data == '')
          {
            $('#load_product_message').html('');
            action = 'active';
          }
          else
          {
            $('#load_product').append(data);
            $('#load_product_message').html("");
            action = 'inactive';
          }
        }
      })
    }

    if(action == 'inactive')
    {
      action = 'active';
      load_product(limit, start);
    }

    //using window scroll function to load products
    $(window).scroll(function(){
      if($(window).scrollTop() + $(window).height() > $("#load_product").height() && action == 'inactive')
      {
        lazy_loader(limit);
        action = 'active';
        start = start + limit;
        setTimeout(function()
        {
          //call load product function
          load_product(limit, start);
        }, 1000);
      }
    });

  });
</script>

 

Step 4 : Create a product  controller in Controller folder.

<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class Product extends CI_Controller {

	function index()
	{
		//load product page
		$this->load->view('product');
	}

	function fetch_product()
	{
		$output = '';

		//load product model
		$this->load->model('product_model');

		//fetch product list
		$data = $this->product_model->fetch_product_list($this->input->post('limit'), $this->input->post('start'));
		echo $data;
	}

}

?>

 

Step 5 : Go to model folder and create product_model.php file so that we will fetch the products from database and pass on controller.

<?php
class Product_model extends CI_Model
{
	function fetch_product_list($limit, $start)
	{

		//fetch product from database
		$query = $this->db->select("*")
						  ->from("products")
						  ->limit($limit, $start)
						  ->get();
		if($query->num_rows() > 0)
		{
			$output = '';
			$output .= '<div class="row">';
			foreach($query->result() as $product)
			{
				$output .= '
				<div class="col-sm-3">
					<div class="card">
						<img src="'.base_url().'upload/'.$product->image.'" style="width: 100%; height: 250px;">
						<h3 class="text-danger">'.$product->title.'</h3>
						<p>'.$product->description.'</p>
					</div>
				</div>
				';
			}
			$output .= '</div>';
			return $output;
		}
		
	}
}
?>

 

Comments ( 0 )