我在codeigniter中使用jquery插件 scrollpagination 我遇到的问题是我的循环没有终止，也没有给出准确的结果。
这是我的 html 代码
<div id="main">
<div id='friend_display'>
<?php if($list->num_rows() > 0 ){
foreach($list->result() as $show)
{ ?>
<div class="image-box" style="margin-left:30px" id='image-holder' >
<div class="photo-cover">
<a href="<?=base_url()?>uploads/user_images/<?php echo $show->user_image;?>" class="big-image"><img width="160px" height="117px" src="<?=base_url()?>uploads/user_images/friends/<?php echo $show->user_image;?>" alt="" /></a>
</div>
<p class="photo-name"><b><?php echo $show->user_name;?></b></p>
</div>
<?php } } else { echo '<div align="center" style="color:#FF0000; font-size:17px; font-weight:bold">You have no Friends yet</div>';}?>
<div class="cl"> </div>
</div></div>
这是脚本
<script type="text/javascript">
var page_num = 1;
$(function(){
$('#friend_display').scrollPagination({
'contentPage': '<?=base_url()?>friends/load_more', // the url you are fetching the results
'contentData': {page_num:$('.image-box').size()}, // these are the variables you can pass to the request, for example: children().size() to know which page you are
'scrollTarget': $(window), // who gonna scroll? in this example, the full window
'heightOffset': 10, // it gonna request when scroll is 10 pixels before the page ends
'beforeLoad': function(){ // before load function, you can display a preloader div
$('#loading1').fadeIn();
},
'afterLoad': function(elementsLoaded){ // after loading content, you can use this function to animate your new elements
$('#loading1').fadeOut();
var i = 0;
$(elementsLoaded).fadeInWithDelay();
page_num:$('.image-box').size();
}
});
// code for fade in element by element
$.fn.fadeInWithDelay = function(){
var delay = 0;
return this.each(function(){
$(this).delay(delay).animate({opacity:1}, 200);
delay += 100;
});
};
});
</script>
这是我的 php 功能
function load_more()
{
$offset = $this->input->post('page_num');
$list = $this->friends_model->show_friends($offset);
if($list->num_rows()>0)
{
foreach($list->result() as $show)
{?>
<div class="image-box" style="margin-left:30px" id='image-holder'>
<div class="photo-cover">
<a href="<?=base_url()?>uploads/user_images/<?php echo $show->user_image;?>" class="big-image"><img width="160px" height="117px" src="<?=base_url()?>uploads/user_images/friends/<?php echo $show->user_image;?>" alt="" /></a>
</div>
<p class="photo-name"><b><?php echo $show->user_name;?></b></p>
</div>
<?php } ?>
<div class="cl"> </div>
<?php
}
else
{
//echo(333);
}
}
db 我正在讨论主要查询 $这 - ＆GT; DB-＆GT;极限（12，$偏移）; 谁能告诉我我错过了什么？
打开此指向wathch完整代码的链接。Scroll Pagination
答案 0 :(得分：2)
我相信你提取偏移的方式是不正确的。 （我以为我不确定，因为我不知道你的POST ['page_num']中有什么内容）
$offset = $this->input->post('page_num');
看起来你要获取页码，但限制函数中的偏移量应该是必须跳过多少行。因此，如果每个“tick”显示12个结果，则偏移量应为12 * page_number
$this->db->limit(12,$offset*12);
如果您将偏移量留给页码，您将得到错误的结果：
limit(12,[0,1,2,...]) // items 1-12, 2-13, 3-14 etc...
limit(12,[0,12,24....] //items 1-12, 13-24, 25-32 etc...
答案 1 :(得分：1)
在这里，我以自己的方式解决这个问题，你可以试试这个。在你的脚本中删除这一行
'contentData': {page_num:$('.image-box').size()},
并添加此行
'childClass' : '.image-box',
打开scrollpagination.js文件后，将此行data: opts.contentData,替换为此data: {page_num : $(obj).children(opts.childClass).size()},。再次使用'contentData' : {},替换'childClass' : '.datalist',这一行。
在function display_friends()中，请使用此行exit;替换echo '<input type="hidden" id="nodata" value="1" />';函数。在那之后写你的脚本看起来像这样：
$(function(){
$('#nomoreresult').hide();
$('#loading1').hide();
$('#friend_display').scrollPagination({
'contentPage': 'Your_Url', // the url you are fetching the results
// these are the variables you can pass to the request, for example: children().size() to know which page you are
'childClass' : '.image-box',
'scrollTarget': $(window), // who gonna scroll? in this example, the full window
'heightOffset': 10, // it gonna request when scroll is 10 pixels before the page ends
'beforeLoad': function(){ // before load function, you can display a preloader div
$('#loading1').show().fadeIn();
},
'afterLoad': function(elementsLoaded){
// after loading content, you can use this function to animate your new elements
$('#loading1').hide().fadeOut();
$(elementsLoaded).fadeInWithDelay();
if($('#nodata').val() == '1'){
$('#friend_display').stopScrollPagination();
$('#loading1').hide();
$('#nomoreresult').show().fadeIn();
}
}
});
// code for fade in element by element
$.fn.fadeInWithDelay = function(){
var delay = 0;
return this.each(function(){
$(this).delay(delay).animate({opacity:1}, 200);
delay += 1000;
});
};
答案 2 :(得分：0)
你试过jQuery.noConflict()吗？
<script type="text/javascript">
var page_num = 1;
jQuery.noConflict();
$(function(){...
EDIT2： 看来你的偏移是错误的。根据{{3}}
查找
$offset = $this->input->post('page_num');
$list = $this->friends_model->find($offset);
替换：
$page_line = 6; //for example
$page_num = $this->input->post('page_num');
$offset = ($page_num -1) * $page_line;
$list = $this->friends_model->find($offset);
答案 3 :(得分：0)
在afterLoad:function(){..代码中添加此缺失的代码，这也应该停止循环您的分页，确保添加您为scrollpagination id <div id='friend_display'>
if ($('#friend_display').children().size() > 100){ //set the condition to where to stop
// if more than 100 results already loaded, then stop pagination (only for testing)
$('#nomoreresults').fadeIn(); //if you want to show message like "No more result!" use this
$('#friend_display').stopScrollPagination();// this is the most important function call
}
在.scrollPagination({..内更改'contentPage': '<?php echo base_url();?>controller/action'，这意味着您的display_friends（）方法只应包含要加载和解析的视图文件以及您要显示的数据和在该视图中使用foreach