baby machinery baby machinery - 4 months ago 91
jQuery Question

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/>

{{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
$(window).scroll(function(){
if($(window).scrollTop() == $(document).height() - $(window).height())
{

var page += 1;

$.ajax({
url: '/blog/index?page=' + page,
success: function (data) {
$('.rc6').append(data);
}
});
}
});
//End
});


actually i dont know how to call pagination from ajax/jquery.

Answer

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/>

            {{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>

[jquery: on your main (blog/index?) Volt page]

 var page = 1;
 var maxPages = {{ page.last }};

 $(window).scroll(function() {
   if ($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
     page += 1;

     if (page <= maxPages) {
        $.ajax({
          url: '/demo/blog/index?page=' + page,
          success: function(data) {
            $('.blogContainer').append(data);
          }
        });
    }

   }
 });