Codeigniter Pagination Infinite Scroll Using Ajax and Jquery

In this instructional exercise, I have clarified about Codeigniter Pagination Infinite Scroll Using Ajax and Jquery. The greater part of the well-known site resembles Flipkart ,Facebook,Google+ actualizing this sort of arrangements, Because interminable parchment stack date makes your site extremely easy to understand and To show more substance to the client without exploring to another page.

Live Demo Download

Let's see how to implement Codeigniter infinite scroll. Create your own database connects to the CodeIgniter files.

Database

Create a table 'content_information' or run below SQL query in your PHPMyAdmin. Download the there I have attached with table dummy content.

CREATE TABLE IF NOT EXISTS `content_information` (
 `id` int(11) NOT NULL AUTO_INCREMENT,
 `title` varchar(60) NOT NULL,
 `description` text NOT NULL,
 PRIMARY KEY (`id`)
 )

Controller

Create a new content controller file add the below code. First, you have to list out the total number table record count, then next set per page display record count. For counting the record use SQL query. Here I have created get_all_content() function it will get to the total no.of records count.

Path : applications/controllers/content.php

<?php defined('BASEPATH') OR exit('No direct script access allowed');
class Content extends CI_Controller {
    public function __construct()
    {
        parent::__construct();
        $this -> load->model('content_model');
    }

    public function index()
    {
        $total_data = $this->content_model->get_all_count();
        $content_per_page = 5; 
        $this->data['total_data'] = ceil($total_data->tol_records/$content_per_page);
        $this->load->view('content_page', $this->data, FALSE);
    }

    public function load_more()
    {
        $group_no = $this->input->post('group_no');
        $content_per_page = 5;
        $start = ceil($group_no * $content_per_page);
        $all_content = $this->content_model->get_all_content($start,$content_per_page);
        if(isset($all_content) && is_array($all_content) && count($all_content)) : 
            foreach ($all_content as $key => $content) :
                 echo '<li>'.$content->title.'</li>';
                 echo '<p>'.$content->description.'</p>';                 
            endforeach;                                
        endif; 
    }

}

Models

Create a new model 'content_model' Write the ajax response functions and count the records functions.

Path : applications/models/content_model.php

<?php  if ( ! defined('BASEPATH')) exit('No direct script access allowed');

class Content_model extends CI_Model
{
    public function get_all_count()
    {
        $sql = "SELECT COUNT(*) as tol_records FROM content_information";       
        $result = $this->db->query($sql)->row();
        return $result;
    }

    public function get_all_content($start,$content_per_page)
    {
        $sql = "SELECT * FROM  content_information LIMIT $start,$content_per_page";       
        $result = $this->db->query($sql)->result();
        return $result;
    }
    
}

View

we need to determine when the user hits the bottom of the page. $(window).scroll(function() script will post the ajax response value to the controller.

Path : applications/views/content_page.php

<html>
    <body>
        <div id="container">
            <h1>Codeigniter Pagination Infinite Scroll</h1>
            <div id="body">
              <ol> <div id="results"></div></ol>
            </div>    
        </div>
    </body>
</html>

<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var total_record = 0;
var total_groups = <?php echo $total_data; ?>;  
$('#results').load("<?php echo base_url() ?>content/load_more",
 {'group_no':total_record}, function() {total_record++;});
$(window).scroll(function() {       
    if($(window).scrollTop() + $(window).height() == $(document).height())  
    {           
        if(total_record <= total_groups)
        {
          loading = true; 
          $('.loader_image').show(); 
          $.post('<?php echo site_url() ?>content/load_more',{'group_no': total_record},
            function(data){ 
                if (data != "") {                               
                    $("#results").append(data);                 
                    $('.loader_image').hide();                  
                    total_record++;
                }
            });     
        }
    }
});
});
</script>

Each time the user scrolls to the bottom of the page count will increase and script response post the value in the controller.

Menu Link

31 May, 2016