Codeigniter Tutorials

Home » Codeigniter »

Data Load on mouse scroll

Controller

File Name :

<?php if (! defined('BASEPATH')) exit('No direct script access allowed');
class Dataloadonscroll extends CI_Controller {
function __construct()
{
parent::__construct();
//$this->load->model('Auth_model');
}

public function index() {
$this->load->view('dataloadonscroll');
}

function fetch()
{
$output = '';
//$this->load->model('Auth_model');
$data = $this->Auth_model->fetch_data($this->input->post('limit'), $this->input->post('start'));
if($data->num_rows() > 0)
{
foreach($data->result() as $row)
{
$output .= '
<div class="post_data">
<h3 class="text-danger">'.$row->post_title.'</h3>
<p>'.$row->post_description.'</p>
</div>
';
}
}
echo $output;
}

}

View

<!DOCTYPE html>
<html>
<head>
<title>Facebook Style Infinite Scroll Pagination in Codeigniter using Ajax</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>
@-webkit-keyframes placeHolderShimmer {
0% {
background-position: -468px 0;
}
100% {
background-position: 468px 0;
}
}

@keyframes placeHolderShimmer {
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: placeHolderShimmer;
animation-name: placeHolderShimmer;
-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;
}

.post_data
{
padding:24px;
border:1px solid #f9f9f9;
border-radius: 5px;
margin-bottom: 24px;
box-shadow: 10px 10px 5px #eeeeee;
}
</style>
</head>
<body>
<div class="container">
<h2 align="center"><u>Facebook Style Infinite Scroll Pagination in Codeigniter using Ajax</u></h2>
<br />
<div id="load_data"></div>
<div id="load_data_message"></div>
<br />
<br />
<br />
<br />
<br />
<br />
</div>
</body>
</html>
<script>
$(document).ready(function(){

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

function lazzy_loader(limit)
{
var output = '';
for(var count=0; count<limit; count++)
{
output += '<div class="post_data">';
output += '<p><span class="content-placeholder" style="width:100%; height: 30px;"> </span></p>';
output += '<p><span class="content-placeholder" style="width:100%; height: 100px;"> </span></p>';
output += '</div>';
}
$('#load_data_message').html(output);
}

lazzy_loader(limit);

function load_data(limit, start)
{
$.ajax({
url:"<?php echo base_url(); ?>dataloadonscroll/fetch",
method:"POST",
data:{limit:limit, start:start},
cache: false,
success:function(data)
{
if(data == '')
{
$('#load_data_message').html('<h3>No More Result Found</h3>');
action = 'active';
}
else
{
$('#load_data').append(data);
$('#load_data_message').html("");
action = 'inactive';
}
}
})
}

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

$(window).scroll(function(){
if($(window).scrollTop() + $(window).height() > $("#load_data").height() && action == 'inactive')
{
lazzy_loader(limit);
action = 'active';
start = start + limit;
setTimeout(function(){
load_data(limit, start);
}, 1000);
}
});

});
</script>

model

function fetch_data($limit, $start)
{

$this->db->select("*");
$this->db->from("post");
$this->db->order_by("id", "DESC");
$this->db->limit($limit, $start);
$query = $this->db->get();
return $query;
}

Itechtuto

Codeigniter Tutorials

Data Load on mouse scroll

Controller

File Name :

View

model

Connect Us Socially:

Quick Links