jquery 的 Phalcon 自动分页

Question

我想像 facebook 分页一样实现分页。在我的博客中，我希望它首先加载 3post，然后当页面滚动到底部时它会加载更多... 我想要没有任何插件的简单 jquery。这就是为什么我尝试遵循这个 link: example and example2 但不知道如何使用 phalcon 分页 jquery 可行。

我的当前配置是这样的：

[控制器]

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

[伏特]

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

一段时间后我收到此错误。查看图片：并打破 decs 排序顺序。我认为 index.volt 内部的原因有查询，loadpost.volt 中也有查询（在您的示例中为 newpage.volt）。使其单独查询两次可能。还有 jquery "no more post not showing" 请告诉我如何解决？

[Jquery 属性id语法id错误]

Answer 1

我举了个小例子。请注意，这是一个精简的示例，代码不完整，但应该可以使用。您可能需要在这里或那里添加一些您自己的代码。

[控制器]

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

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

   }
 });

jquery 的 Phalcon 自动分页

Phalcon auto pagination with jquery

javascript

jquery

pagination

phalcon