Skip to content

Instantly share code, notes, and snippets.

@rintoug

rintoug/Post.php

Last active Sep 16, 2019
Embed
What would you like to do?
Ajax Infinite Scroll Pagination in Codeigniter [Tutorial : https://www.tutsplanet.com/ajax-infinite-scroll-pagination-in-codeigniter/]
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
//application/views/posts.php
?>
<?php foreach ($posts as $post):?>
<div class="col-md-12">
<div class="row no-gutters border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative">
<div class="col p-4 d-flex flex-column position-static">
<h5 class="mb-0"><?php print $post->title?></h5>
<p class="card-text mb-auto"><?php print $post->description?></p>
<a href="#" class="stretched-link">Continue reading</a>
</div>
<div class="col-auto d-none d-lg-block">
<svg class="bd-placeholder-img" width="200" height="250" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Thumbnail"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"></rect><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg>
</div>
</div>
</div>
<?php endforeach;?>
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
//Location: application/controllers/Post.php
class Post extends CI_Controller {
public $perPage = 3;
public function index()
{
$this->load->model('Post_model');
//Total records Count
$totalPosts = $this->Post_model->getPostsCount();
$data['total_pages'] = ceil($totalPosts/$this->perPage);
if(!empty($this->input->get("page"))){
$start = $this->perPage * $this->input->get('page');
$data['posts'] = $this->Post_model->getPosts($this->perPage,$start); //limit,start
$this->load->view('ajax_post',$data);
}
else {
$start =0;
$data['posts'] = $this->Post_model->getPosts($this->perPage,$start); //limit,start
$this->load->view('posts',$data);
}
}
}
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
////Location: application/views/post.php
?>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Codeigniter Ajax Pagination</title>
<!-- Bootstrap core CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Jquery-->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.min.js"></script>
<style type="text/css">
.loader {
height: 30px;
text-align: center;
width:150px;
margin:0 auto;
padding:10px;
display: none;
}
</style>
</head>
<body>
<div class="container">
<div class="row" id="posts-infinite">
<?php foreach ($posts as $post):?>
<div class="col-md-12">
<div class="row no-gutters border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative">
<div class="col p-4 d-flex flex-column position-static">
<h5 class="mb-0"><?php print $post->title?></h5>
<p class="card-text mb-auto"><?php print $post->description?></p>
<a href="#" class="stretched-link">Continue reading</a>
</div>
<div class="col-auto d-none d-lg-block">
<svg class="bd-placeholder-img" width="200" height="250" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Thumbnail"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"></rect><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg>
</div>
</div>
</div>
<?php endforeach;?>
</div>
<div class="loader"><img src="<?php print base_url('ajax-loader.gif')?>"> </div>
</div>
<script type="text/javascript">
var page =1;
var total_pages = <?php print $total_pages?>;
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() >= $(document).height()) {
page++;
if(page < total_pages) {
loadData(page);
}
}
});
/*Load more Function*/
function loadData(page) {
$( ".loader" ).css( "display","block" );
$.ajax({
method: "GET",
url: "<?php print site_url('post')?>",
data: { page: page }
})
.done(function( content ) {
$( ".loader" ).css( "display","none" );
$("#posts-infinite").append(content);
});
}
</script>
</body>
</html>
<?php
class Post_model extends CI_Model {
public function getPosts($limit,$start)
{
$this->db->limit($limit, $start);
$query = $this->db->get('posts');
return $query->result();
}
public function getPostsCount()
{
$this->db->select('id');
$this->db->from('posts');
return $this->db->count_all_results();
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.