Phalcon auto pagination with jquery

问题

I want implement pagination like facebook pagination. In my blog i want it will load first 3post and then when page scroll to bottom it will load more ... i want simple jquery without any plugins. thats why i try to follow this link: example and example2 but not figure it how to use phalcon pagination jquery workable.

my currnet configure is like:

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

After this some time i get this error. see the image: and breaking decs sort order. i think cause of inside index.volt have query which is also have in loadpost.volt(newpage.volt in your example). so that its query individually two times may be. and also in jquery "no more post not showing" Please tell me how to solve?

[Jquery property id syntax id error]

回答1:

I made a little example. Note that this is a stripped down example, the code isn't complete but it should work. You will probably need to add some of your own code here or there.

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

[view: 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);
          }
        });
    }

   }
 });

来源：https://stackoverflow.com/questions/38763123/phalcon-auto-pagination-with-jquery