Phalcon Auto Paginierung mit Jquery

Question

Ich möchte Seitenumbruch wie Facebook Paginierung implementieren. In meinem Blog will ich, dass es zuerst 3post lädt und dann, wenn die Seite nach unten scrollt, wird es mehr laden ... ich will einfach jquery ohne irgendwelche plugins. Deshalb versuche ich, diesem Link zu folgen: example und example2, aber nicht, wie man Phalcon Paginierung jquery funktioniert.

meine currnet configure ist wie:

[Controller]

$bloger  = Blogs::find(["order" => "datetime DESC"]); 
$numberPage = $this->request->getQuery('page', 'int', 1); 

/** @var \Phalcon\Paginator\Adapter\Model $paginator */ 
$paginator = new \Phalcon\Paginator\Adapter\Model ([ 
    'data' => $bloger, 
    'limit' => 2, 
    'page' => $numberPage 
]); 

// I am assigning this to an array, because I need the variables twice. 
$viewParameters = ['counts' => $bloger->count(), 'page' => $paginator->getPaginate()]; 
$this->view->setVars($viewParameters); 

// when we request a new page via ajax, we will render the page and return it 
if ($this->request->isAjax()) { 
    echo $this->view->getRender('blog', 'index', $viewParameters); 
    return false; 
} 

[Volt]

<div class="rc6"> 
<?php foreach ($page->items as $bloger) { ?> 
    <div class="bart item"> 

     <h1 class="fm clr_b">{{ link_to('blog/showfull/'~bloger.id,bloger.blog_title) }}</h1> 

     <b class="pause">Posted : [ {{bloger.blog_author}} ] {{ bloger.datetime }}</b><br/><br/> 

<p class="tac clr_b"> 
<img src="uploads/blogs/<?php echo($bloger->blog_image); ?>"/> 
</p><br/> 

     {{bloger.blog_intro}}<br/> 
     {{bloger.blog_desc}}<br/> 
     {{bloger.blog_concl}}<br/> 

<?php $tags = explode(',', $bloger->tags); foreach ($tags as $taged) { ?> 
    <a class="tagline" href="blog/tag/<?php echo($taged); ?>"><?php echo($taged); ?></a> 
<?php } ?> 
     <br/> 
</div> 
<?php } ?> 
</div> 

[Jquery]

$(document).ready(function() { 
//Begin 
    var page = 1; 
    var maxPages = {{ page.last }} ; 
    $(window).scroll(function() 
{ 
    if($(window).scrollTop() + $(window).height() == $(document).height()) { 

    if(page == maxPages) { 
     $('.loader').html('No More Post to Render').fadeIn(500); 
    } 
    page += 1; 
    if(page <= maxPages){ 
     $.ajax({ 
     url: 'blog/index?page=' + page, 
     success: function(data) { 
      $('.blogItems').append(data); 
     } 
     }); 
    } 
    } 
}); 
//End 
}); 

Danach einiger Zeit bekomme ich dieser Fehler. Siehe das Bild: und brechen decs sortieren Reihenfolge. Ich denke, Ursache von Inside Index.volt haben Abfrage, die auch in loadpost.volt (newpage.volt in Ihrem Beispiel) haben. so dass seine Abfrage individuell zwei mal sein kann. und auch in jquery "nicht mehr post nicht zeigen" Bitte sagen Sie mir, wie zu lösen?

[Syntax-ID Fehler JQuery Eigenschaft id]

Answer 1

machte ich ein kleines Beispiel. Beachten Sie, dass dies ein abgespecktes Beispiel ist, der Code ist nicht vollständig, aber es sollte funktionieren. Wahrscheinlich müssen Sie hier oder da etwas eigenen Code hinzufügen.

[Controller]

$bloger  = Blogs::find(["order" => "datetime DESC"]); 
$numberPage = $this->request->getQuery('page', 'int', 1); 

/** @var \Phalcon\Paginator\Adapter\Model $paginator */ 
$paginator = new \Phalcon\Paginator\Adapter\Model ([ 
    'data' => $bloger, 
    'limit' => 2, 
    'page' => $numberPage 
]); 

// I am assigning this to an array, because I need the variables twice. 
$viewParameters = ['counts' => $bloger->count(), 'page' => $paginator->getPaginate()]; 
$this->view->setVars($viewParameters); 

// when we request a new page via ajax, we will render the page and return it 
if ($this->request->isAjax()) { 
    echo $this->view->getRender('blog', 'newpage', $viewParameters); 
    return false; 
} 

[Ansicht: Blog/newpage]

<div class="blogContainer"> 
    <?php foreach ($page->items as $bloger) { ?> 
     <div class="bart item"> 

      <h1 class="fm clr_b">{{ link_to('blog/showfull/'~bloger.id,bloger.btitle) }}</h1> 

      <b class="pause">Posted : [ {{bloger.bauthor}} ] {{ bloger.datetime }}</b><br/><br/> 

      <p class="tac clr_b">{{ image('data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=',"alt": "Blog Image","data-src":"uploads/blogs/"~bloger.bimage,"title":"Description for "~bloger.btitle) }}</p><br/> 


      {{bloger.bintro}}<br/> 
      {{bloger.bdesc}}<br/> 
      {{bloger.bconcl}}<br/> 

      <?php 
      $tags = explode(',', $bloger->tags); 
      foreach ($tags as $taged) { ?> 
       <a class="tagline" href="blog/tag/<?php echo($taged); ?>"><?php echo($taged); ?></a> 
      <?php } ?> 
      <br/> 
     </div> 
    <?php } ?> 
</div> 

<script> 
    var maxPages = {{ page.last }}; 
</script> 
<script src="/path/to/jquery.js"></script> 
<script src="/path/to/other-jquery-stuff.js"></script> 

[jquery: src = "/ path/to/other-Jquery-stuff. js "]

var page = 1; 

$(window).scroll(function() { 
    if ($(window).scrollTop() + $(window).height() > $(document).height() - 100) { 

    if (page == maxPages) { 
     $('.loader').html('No More Post to Render').fadeIn(500); 
    } 

    page += 1; 

    if (page <= maxPages) { 
     $.ajax({ 
      url: '/demo/blog/index?page=' + page, 
      success: function(data) { 
      $('.blogContainer').append(data); 
      } 
     }); 
    } 

    } 
});