Codeigniter Pagination Infinite Scroll Using Ajax and Jquery - Mostlikers

31 May, 2016

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.

Codeigniter Pagination Infinite Scroll Using Ajax and Jquery

Live Demo             Download

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


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` (
 `title` varchar(60) NOT NULL,
 `description` text NOT NULL,


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()
        $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>';                 



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;


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
        <div id="container">
            <h1>Codeigniter Pagination Infinite Scroll</h1>
            <div id="body">
              <ol> <div id="results"></div></ol>

<script src="//"></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; 
          $.post('<?php echo site_url() ?>content/load_more',{'group_no': total_record},
                if (data != "") {                               
Each time the user scrolls to the bottom of the page count will increase and script response post the value in the controller.

Related Topics