Last active
May 3, 2021 15:34
-
-
Save rintoug/9ed45c7c318a53d0209b007ffeea4193 to your computer and use it in GitHub Desktop.
Ajax Infinite Scroll Pagination in Codeigniter [Tutorial : https://www.tutsplanet.com/ajax-infinite-scroll-pagination-in-codeigniter/]
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?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;?> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?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); | |
| } | |
| } | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> | |
| <!-- Jquery--> | |
| <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?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
not working in mobile browser. like chrome