Codeigniter中的无限滚动jQuery插件 [英] Infinite scroll jquery plugin in codeigniter

问题描述

我在config文件夹中有一个pagination.php文件.代码在下面

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>';

如何在Codeigniter中使用jquery插件无限滚动?

How can I use jquery plugin infinite scroll in codeigniter?

推荐答案

我已经使用jquery ajax解决了此解决方案，而没有任何插件.代码在下面...

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;
});

已编辑

这是控制器代码:

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);

}

希望这一天有人需要.

这篇关于Codeigniter中的无限滚动jQuery插件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！