Codeigniter Pagination Infinite Scroll Using Ajax and Jquery - Mostlikers

31 May, 2016

Codeigniter Pagination Infinite Scroll Using Ajax and Jquery

In this tutorial i have explain about Codeigniter Pagination Infinite Scroll Using Ajax and Jquery. Most of the popular website's like Filpkart ,Facebook,Google+ implementing this kind of solutions, Because infinite scroll load date make your website very user friendly and To display more content to user without navigating to other page. 

Codeigniter Pagination Infinite Scroll Using Ajax and Jquery

Live Demo             Download

Let's see how to implement Codeiginiter infinite scroll. Create your own database connect to the codeiginiter 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 bottom of the page count will increase and script response post the value in controller.

Related Topics