Skip to content

Instantly share code, notes, and snippets.

@rintoug

rintoug/Post.php

Last active May 3, 2021 15:34
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save rintoug/9ed45c7c318a53d0209b007ffeea4193 to your computer and use it in GitHub Desktop.
Save rintoug/9ed45c7c318a53d0209b007ffeea4193 to your computer and use it in GitHub Desktop.
Download ZIP
Ajax Infinite Scroll Pagination in Codeigniter [Tutorial : https://www.tutsplanet.com/ajax-infinite-scroll-pagination-in-codeigniter/]
Raw
ajax_post.php
<?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;?>
Raw
Post.php
<?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);
}
}
}
Raw
post.php
<?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>
Raw
Post_model.php
<?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();
}
}
@yasinyus
Copy link

yasinyus commented May 3, 2021

not working in mobile browser. like chrome

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment