Question

我想像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
});

在这段时间后我得到了这个错误。看图像：并打破decs排序顺序。我认为内部index.volt的原因有在loadpost.volt中的查询（在你的例子中是newpage.volt）。这样它的查询可以单独进行两次。而且在jquery“没有更多的帖子没有显示”请告诉我如何解决？

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

[查看：博客/新页面]

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

   }
 });

Phalcon与jquery的自动分页

1 个答案: