Codeigniter scrollpagination

Question

Ich benutze jquery plugin scrollpagination im codeigniter ich habe das problem, dass meine schleife nicht beendet und alos nicht genaues ergebnis gibt.

das ist mein 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> 

das ist Skript

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

und das ist mein php Funktion

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 Hauptabfrage $ this-> db-> limit (12, $ offset); kann mir jemand sagen, was ich vermisse?

Öffnen Sie diesen Link, um den vollständigen Code anzuzeigen. Scroll Pagination

Answer 1

Hier ich dieses Problem auf meine eigene Weise lösen Sie this.In Ihr Skript entfernen Sie diese Zeile versuchen

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

und fügen Sie diese Zeile

hinzu

'childClass' : '.image-box', 

Nach der Datei scrollpagination.js öffnen Sie diese Zeile data: opts.contentData, mit dieser data: {page_num : $(obj).children(opts.childClass).size()},. Ersetzen Sie erneut 'contentData' : {}, diese Zeile mit 'childClass' : '.datalist',.

In Ihrer function display_friends() ersetzen Sie bitte exit; Funktion mit dieser Linie echo '<input type="hidden" id="nodata" value="1" />';.Danach schreiben das Skript wie folgt aussehen:

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

Answer 2

Ich glaube, dass die Art, wie Sie Offset abholen, nicht korrekt ist. (Dachte, ich bin nicht sicher, weil ich nicht weiß, was in Ihrem POST [ ‚page_num‘])

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

Es sieht aus wie Sie die Seitenzahl holen, aber die in Grenzfunktion versetzt sein sollte, wie viel Zeile muss übersprungen werden. Wenn Sie also 12 Ergebnisse zeigen pro "tick" versetzt sein sollte 12 * page_number

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

Wenn Sie Seitennummer Offset lassen, werden Sie falsche Ergebnisse erhalten:

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

Answer 3

Haben Sie versucht, jQuery.noConflict()?

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

Edit2: Es scheint Ihre Offset funktioniert falsch. http://pastebin.com/MC1KZm8y nach

Suche:

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

ersetzen:

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

Answer 4

Fügen Sie diese fehlenden Code innerhalb des afterLoad:function(){.. Code auch dies sollte Ihre Paginierung stellen Sie sicher, hinzuzufügen genau gleiche ID stoppen Looping, die Sie für die scrollpagination id <div id='friend_display'>

eingegeben

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 
} 

---

innerhalb .scrollPagination({.. ändern 'contentPage': '<?php echo base_url();?>controller/action' in diesem action(){ $this->load->view('that_you_want_to_display'); bedeutet es, dass Ihre display_friends() -Methode nur die Ansichtsdatei enthalten soll, die geladen und analysiert werden soll, und die Daten, die y Sie möchten Ihre Daten mit der Foreach anzeigen und in dieser Ansicht anzeigen.