javascript - 用jQuery Phalcon自动分页

我想要像Facebook分页一样实现分页。在我的博客中，我希望它将首先加载3post，然后当页面滚动到底部时它将加载更多...
我想要没有任何插件的简单jQuery。那就是为什么我尝试遵循此链接的原因：example和example2但没有弄清楚它如何使用Phalcon分页jQuery可行。

我的currnet配置就像：

[控制器]

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

经过一段时间后，我得到这个错误。参见图片：以及打破十进制排序顺序我认为内部index.volt的原因有查询，也有在loadpost.volt（在您的示例中为newpage.volt）。因此它的查询可能是两次。并且在jQuery中“没有更多的帖子不显示”，请告诉我如何解决？





[jQuery属性ID语法ID错误]

最佳答案

我举了一个小例子。请注意，这是一个简化的示例，代码虽然不完整，但可以正常工作。您可能需要在此处或此处添加一些自己的代码。

[控制器]

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

[查看：博客/新页]

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

   }
 });

关于javascript - 用jQuery Phalcon自动分页，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/38763123/