Scroll Pagination in Codeigniter using Ajax
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;"> </span></p>';
output += '<p><span class="content-placeholder" style="width:100%; height: 25px;"> </span></p>';
output += '<p><span class="content-placeholder" style="width:100%; height: 50px;"> </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;
}
}
}
?>
