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.


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.










Related Topics


17 comments:

  1. is not working, why??
    its only show the title

    ReplyDelete
  2. Database connection is fine, but still only the title shows up.

    ReplyDelete
  3. Database connection works but still only the title shows up. Accessing the load_more function works, but in index it wont.

    ReplyDelete
    Replies
    1. This comment has been removed by the author.

      Delete
  4. i integrated the code into my system but why does it only shows till 15?

    ReplyDelete
    Replies
    1. This comment has been removed by the author.

      Delete
  5. how to define $this->input->post('group_no');

    ReplyDelete
  6. how to define $this->input->post('group_no');

    ReplyDelete
    Replies
    1. By default group no 0 . On scroll it will increase the value.

      Delete
  7. $(window).scrollTop() + $(window).height() == $(document).height() - height of footer div
    Trying like above giving all duplicate entries why this happening?

    ReplyDelete
  8. It works for me but when I scroll up then and then only my data is loaded more. and not when i scroll down

    ReplyDelete