无限滚动jquery插件不起作用

时间:2015-01-08 11:06:48

标签: javascript codeigniter jquery-plugins pagination jquery-infinite-scroll

我正在尝试添加无限滚动到codeigniter与Infinite scroll jquery plugin的分页。但没有成功

这是我的控制器:

$config['base_url'] = site_url('news/home/');
$config['total_rows'] = $this->home_model->count_new();
$config['per_page'] = 3;
$config['uri_segment'] = 3;
$config['limit'] = $config['per_page'];
$this->pagination->initialize($config);
$data['news'] = $this->home_model->list_data_new($config['per_page'], $this->uri->segment($config['uri_segment']));
$this->load->view('news_view',$data);

以下是我的观点:

<div id="content">
<?php foreach ($news as $data):?>
    <?php echo $data['title']?>
    Post by: <?php echo $data['username']?>
<?php endforeach;?>
</div>
<button id="next">load more</button>

这里也是javascript:

 $('#content').infinitescroll({
     navSelector  : "#next:last",            
     // selector for the paged navigation (it will be hidden)
     nextSelector : "#next:last",    
     // selector for the NEXT link (to page 2)
     itemSelector : "#content"          
     // selector for all items you'll retrieve
});

分页链接看起来像这样http://localhost/latihan/news/home/3然后点击下一步就像这样http://localhost/latihan/news/home/6

问题是下一篇文章没有显示并加载更多按钮没有加载数据。

任何答案?

非常感谢......

1 个答案:

答案 0 :(得分:0)

您的设置错误。

我建议您查看页面http://www.infinite-scroll.com本身的源代码,因为他们正在使用自己的插件。向下滚动页面以查看其是否正常工作。

除此之外,我不得不说他们的产品记录非常严重,而且工作方式非常不直观。例如,它会从nextSelector读取下一页的网址,但只有 ,当该元素是超链接<a ...>时时间。然后,它将解析该URL的出现次数&#34; 2&#34;,加载,并将数字替换为3,依此类推。因此,第2页为home / 3和第3页为home / 6的预期设计将不适用于此插件。

帮自己一个忙,改用jScroll