Infinite scroll jquery plugin in codeigniter

问题

I have a pagination.php file in the config folder. the code is below

$config['num_links'] = 5;
$config['use_page_numbers'] = TRUE;
$config['query_string_segment'] = 'page';

$config['full_tag_open'] = '<div class="pagination"><ul>';
$config['full_tag_close'] = '</ul></div>';

$config['first_link'] = '&laquo; First';
$config['first_tag_open'] = '<li class="prev page">';
$config['first_tag_close'] = '</li>';

$config['last_link'] = 'Last &raquo;';
$config['last_tag_open'] = '<li class="next page">';
$config['last_tag_close'] = '</li>';

$config['next_link'] = 'Next &rarr;';
$config['next_tag_open'] = '<li class="next page">';
$config['next_tag_close'] = '</li>';

$config['prev_link'] = '&larr; Previous';
$config['prev_tag_open'] = '<li class="prev page">';
$config['prev_tag_close'] = '</li>';

$config['cur_tag_open'] = '<li class="active"><a class="navigation" href="">';
$config['cur_tag_close'] = '</a></li>';

$config['num_tag_open'] = '<li class="page">';
$config['num_tag_close'] = '</li>';

How can I use jquery plugin infinite scroll in codeigniter?

回答1:

I have solved this solution using jquery ajax, without any plugin. Code is below...

//declaring variables
var base_url        = '<?php echo base_url(); ?>';
var offset          = 2; //customize this as your need
var request_ajax    = true;
var ajax_is_on      = false;
var session_user    = '<?php echo $_SESSION['user_name ']; ?>';//customize this as your need
var objHeight       = $(window).height() - 50; //customize this as your need
var user_name       = '<?php echo $this->uri->segment('2 '); ?>';//customize this as your need
var last_scroll_top = 0;

$(window).scroll(function(event) {

  var st = $(this).scrollTop();

  if (st <= last_scroll_top)
    return false;

  if (($(window).scrollTop() + 500) <= ($(document).height() - $(window).height()))
    return false

  var user_posts = '';

  if (!request_ajax || ajax_is_on)
    return false;

  ajax_is_on = true;
  $("#loading-gif").removeClass('hideGif')
                   .addClass('displayGif');



  $.ajax({

    url: base_url + 'controller/function/',
    data: {
      page_number: offset,
      user_name: user_name
    },
    type: 'POST',
    async: false,
    dataType: 'JSON',
    success: function(data) {

      $("#loading-gif").removeClass('displayGif').addClass('hideGif');

      if (data != '0') {

        for (var x = 0; x < data.length; x++) {

          user_posts +=
            '<div class="row-fluid">' +
            '<div class="span7" style="">';

          if (data[x].status != '1')
            user_posts += '<div class="label" style="">Unpublished</div>';
          else
            user_posts += '';

          user_posts += HTMLdesignWITHjqueryVARIABLES;
        }

        $('#infiniteContent').append(user_posts);

        offset += 1;

      } else {

        request_ajax = false;
        $("#message").addClass('alert alert-success');
        $("#pagination_message").html('No More Posts');
      }

      ajax_is_on = false;
    }
  });
  last_scroll_top = st;
});

EDITED

Here is the controller code:

function index() {

  $this->load->library('pagination');
  $this->load->model('menu_model');
  $category = '';

  $data['menu']           = $this->menu_model->get_menu();
  $data['count_posts']    = $this->post_model->count_active_posts();


  /* common configuration for pagination */
  $config['base_url']     = base_url() . 'home/index';
  $config['total_rows']   = $data['count_posts'];



  /* Pagination 1st column */
  $config['per_page'] = $data['per_page'] = 5;
  $offset             = $this->uri->segment(3);
  if ($this->uri->segment(3) > 0) {
      $offset = $this->uri->segment(3) * $config['per_page'] - $config['per_page'];
  }
  $config['offset'] = $offset;
  $this->pagination->initialize($config);

  $data['posts'] = $this->post_model->get_first_column($config['per_page'], $config['offset'], $category);





  /* Pagination 2nd column */
  $config['per_page'] = $data['per_page'] = 3;
  $offset = $this->uri->segment(3);
  if ($this->uri->segment(3) > 0) {
      $offset = $this->uri->segment(3) * $config['per_page'] - $config['per_page'];
  }
  $config['offset'] = $offset;
  $this->pagination->initialize($config);

  $data['all_posts'] = $this->post_model->get_second_column($config['per_page'], $config['offset'], $category);






  /* Pagination 3rd column */
  $config['per_page'] = $data['per_page'] = 2;
  $offset             = $this->uri->segment(3);
  if ($this->uri->segment(3) > 0) {
      $offset = $this->uri->segment(3) * $config['per_page'] - $config['per_page'];
  }
  $config['offset'] = $offset;
  $this->pagination->initialize($config);

  $data['new_posts'] = $this->post_model->get_third_column($config['per_page'], $config['offset'], $category);


  $this->load->view('home_view', $data);

}

Hope someone will need this someday.

回答2:

i have simple step for the scrolling pagination in code igniter, i have check this it work better

$(window).scroll(function(){
    if  ($(window).scrollTop() == $(document).height() - $(window).height()){
        // run our call for pagination
        var table = document.getElementById("table");
        var lastRowIndex = table.rows.length-1;
        loadMore(lastRowIndex);
    }
});

function loadMore(lastRowIndex)
{
$.ajax({
    url: "http://localhost/CodeIgniter/index.php/form/loadmore",  //form is y controller
    type:'POST',
    data: "row="+lastRowIndex, // row wich is post
    success: function(data){    //here data which recevie form controller
        var json = JSON.parse(data);
        var count = json.length;
        var html;
        for( var i = 0; i < count; i++ )
        {
            html += '<tr>';
            html += '<td><input type="checkbox" name="id[]" id="id[]" class="check" value="'+ json[i].id +' "></td>';
            html += '<td>'+ json[i].id +'</td>';
            html += '<td><img src="http://localhost/CodeIgniter/upload/'+ json[i].image +'" class="img-circle" height="25" width="30"></td>';
            html += '<td> ' + json[i].firstname +'</td>';
            html += '<td> ' + json[i].middlename +'</td>';
            html += '<td> ' + json[i].lastname +'</td>';
            html += '<td> ' + json[i].address +'</td>';
            html += '<td> ' + json[i].mobile +'</td>';
            html += '<td> ' + json[i].email +'</td>';
            html += '<td> ' + json[i].gender +'</td>';
            html += '<td><a href="http://localhost/CodeIgniter/index.php/form/del/'+ json[i].id +'">Delete</a></td>';
            html += '<td><a href="http://localhost/CodeIgniter/index.php/form/edite/'+ json[i].id +'">Update</a></td>';
            html += '</tr>';
        }$("#body").append(html); //add this html to th table body which id='body'
    }   
});
}

i use this controller function

 public function loadmore()
 {
    $page=$_POST['row'];
    $per_page = 10;
    $student = $this->Form_model->getview_detail($per_page,$page);
    if($student !== FALSE)
    {
        echo json_encode($student); //send data to script
    }
}

and this is model

public function getview_detail($limit, $start)
{
    $this->db->limit($limit, $start);
    $query = $this->db->get('form');
    return $query->result_array();
}    

来源：https://stackoverflow.com/questions/14934667/infinite-scroll-jquery-plugin-in-codeigniter