javascript - Auto paginación de Phalcon con jquery

pagination

Question

Quiero implementar la paginación como la paginación de Facebook. En mi blog quiero que cargue primero 3post y luego cuando la página se deslice hacia abajo cargará más ... quiero jquery simple sin ningún complemento. Es por eso que trato de seguir este enlace: example y example2, pero no me imagino cómo utilizar phalcon pagination jquery realizable.

mi configuración de currnet es como:

[controlador]

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

[Voltio]

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

Después de esto, algún tiempo me sale este error. ver la imagen: y romper el orden de clasificación de los decs. Creo que la causa de index.volt dentro tiene una consulta que también tiene en loadpost.volt (newpage.volt en su ejemplo). de modo que su consulta individualmente dos veces puede ser. y también en jquery "no más publicaciones no se muestran" Por favor, dime cómo resolverlo?

[Error de identificación de sintaxis de ID de propiedad Jquery]

Answer 1

Hice un pequeño ejemplo. Tenga en cuenta que este es un ejemplo simplificado, el código no está completo pero debería funcionar. Probablemente necesites agregar algo de tu propio código aquí o allá.

[controlador]

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

[ver: blog / nueva página]

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

   }
 });