2016-08-04 1 views
1

私は、ページブックのようなページネーションを実装したいと思います。私のブログでは、最初の3postをロードし、次にページをスクロールしてより多くのページをロードしたいと思っています。 私はプラグインなしで簡単なjqueryが必要です。それは私がこのリンクに従うことを試みる理由である:exampleおよびexample2 phalconページネーションjqueryを使用する方法を理解できません。この後、私が得るいくつかの時間jaleryを使ったPhalcon自動ページネーム

[コントローラ]

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

私の - オンライン・クロックのconfigureが似ていますこのエラー。イメージを参照してください:and breaking decs sort order。私は内部index.voltの原因は、loadpost.volt(あなたの例ではnewpage.volt)にもあるクエリを持っていると思う。そのクエリは個別に2回になる可能性があります。またjqueryで "表示されない投稿はありません"解決方法を教えてください?

enter image description here

its happen on scroll

[jqueryのプロパティID構文IDエラー]

enter image description here

+1

あなたは何を試しましたか?あなたはおそらく、あなたが画面の最後に達したかどうかをチェックし、次にajaxを介して次のページのコンテンツをロードするためのイベントを必要とします。 – Timothy

+0

幸運!どのように行うか理解していない! –

+1

あなたのajaxでは、リクエストしたいページ番号の変数を渡す必要があります。 (この数字を増やす必要があります)。それから、あなたのコントローラーで、リクエストページ項目でビューを(または部分的に)レンダリングします。そして、このビューの出力をあなたのajaxの成功に戻して、それを追加してください。そういうものがあります。 – Timothy

答えて

2

少し例を作りました。これは削除された例であり、コードは完全ではありませんが、動作するはずです。おそらく、あなた自身のコードをここに追加する必要があります。

[制御]

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

[ビュー:ブログ/ 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 = "/パス/ /他の-jqueryの-ものです。 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); 
      } 
     }); 
    } 

    } 
}); 
+0

私はスクロールで作業していないので、isAjax()条件でメインレイアウトを呼び出さないために '$ this-> view-> setMainView(NULL);'を追加する必要があります。クリックイベント。 –

関連する問題