Codeigniter scrollpagination

问题:

I am using jquery plugin scrollpagination in codeigniter i am facing problem that my loop does not terminate and alos not giving accurate result.

this is my html code

<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">&nbsp;</div>
</div></div>

this is script

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

and this is my php function

  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">&nbsp;</div>
    <?php
    } 
    else 
    {  
        //echo(333); 
    }
}

in db i jst shoing main query $this->db->limit(12,$offset); can someone tell me what i am missing?

Open this Link to wathch complete code.Scroll Pagination

回答1:

Here i solve this problem in my own way you can try this.In your script remove this line

'contentData': {page_num:$('.image-box').size()},

and add this line

 'childClass' : '.image-box',

After open scrollpagination.js file then replace this line data: opts.contentData, with this data: {page_num : $(obj).children(opts.childClass).size()},. Again replace 'contentData' : {}, this line with 'childClass' : '.datalist',.

In your function display_friends() please replace exit; function with this line echo '<input type="hidden" id="nodata" value="1" />'; . After that write your script look like this :

$(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:

I belive that the way you are fetching offset isn't correct. (Thought I'm not sure because I don't know what is in your POST['page_num'])

$offset =   $this->input->post('page_num');

It looks like you fetch the page number, but the offset in limit function should be how much row has to be skipped. So if you are showing 12 results per "tick" offset should be 12*page_number

$this->db->limit(12,$offset*12);

If you leave offset to page number, you will get wrong results:

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...

回答3:

Did you try jQuery.noConflict()?

  <script type="text/javascript">
  var page_num = 1; 
  jQuery.noConflict();
   $(function(){...

Edit2: It seems your offset works wrong. According to http://pastebin.com/MC1KZm8y

Find:

$offset =   $this->input->post('page_num');
$list       =   $this->friends_model->find($offset);

Replace:

$page_line = 6; //for example
$page_num = $this->input->post('page_num');
$offset   = ($page_num -1) * $page_line;
$list       =   $this->friends_model->find($offset);

回答4:

Add this missing code inside the afterLoad:function(){.. code also this should stop looping your pagination make sure to add exactly same id that you entered for the 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
}

---

inside .scrollPagination({.. change 'contentPage': '<?php echo base_url();?>controller/action' inside this action(){ $this->load->view('that_you_want_to_display'); it means your display_friends() method only should contain the view file that want to load and parse and the data that you want to display and inside that view echo your data using the foreach