Codeigniter scrollpagination

Question

Sto usando il plug-in jquery scrollpagination in code-code mi trovo di fronte a un problema che il mio ciclo non termina e non fornisce risultati accurati.

questo è il mio html codice

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

questo è sceneggiatura

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

e questo è il mio php funzione

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 jst shoing main query $ this-> db-> limit (12, $ offset); qualcuno può dirmi cosa mi manca?

Apre questo collegamento al codice completo di wathch. Scroll Pagination

Answer 1

Qui posso risolvere questo problema in modo mio si può provare this.In lo script rimuovere questa riga

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

e aggiungi questa riga

'childClass' : '.image-box', 

Dopo aver aperto il file scrollpagination.js, sostituire questa riga data: opts.contentData, con questo data: {page_num : $(obj).children(opts.childClass).size()},. Sostituire nuovamente 'contentData' : {}, questa riga con 'childClass' : '.datalist',.

Nel function display_friends() sostituire la funzione exit; con questa riga echo '<input type="hidden" id="nodata" value="1" />';.Dopo di che scrivere lo script simile a questa:

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

Credo che il modo in cui si sta recuperando l'offset non sia corretto. (Ho pensato che non sono sicuro perché io non so che cosa è nel vostro POST [ 'PAGE_NUM'])

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

Sembra che si recupera il numero di pagina, ma l'offset in funzione di limite dovrebbe essere quanto la riga deve essere saltata. Quindi, se si sta mostrando 12 risultati per "spuntare" Offset dovrebbe essere 12 * PAGE_NUMBER

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

se si lascia offset al numero di pagina, si ottengono risultati errati:

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

Hai provato jQuery.noConflict()?

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

Edit2: Sembra compensato tue opere sbagliato. Secondo http://pastebin.com/MC1KZm8y

Ricerca:

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

sostituzione:

$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

Aggiungere questo codice mancante all'interno del codice afterLoad:function(){.. anche questo dovrebbe smettere di loop vostra impaginazione assicurarsi di aggiungere esattamente stesso ID immesso per la 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 
} 

---

all'interno .scrollPagination({.. cambiare 'contentPage': '<?php echo base_url();?>controller/action' all'interno di questo action(){ $this->load->view('that_you_want_to_display'); significa che il metodo display_friends() deve solo contenere il file di visualizzazione che desidera caricare e analizzare e i dati che si vuoi visualizzare e all'interno di quella vista eco i tuoi dati usando il foreach