fulephpとjquery.autopager.jsで「もっと見る」を実装したのでメモ

まずはjquery.autopager.jsをダウンロード

こちらにありました

PHP部分の実装

mvc的にはこういうのはviewに書くのがいいのかもしれませんが、僕は迷わずcontrollerに書いてます。

//全データ数を取得
$all_num = 何らかの処理//select count(*) from *** where ***とかですね

//ページング
$config = array(
    'name'=>'pagination',
    'per_page' => 5,//1ページの表示数
    'uri_segment'=>'p',//ページ番号パラメータ名 2ページ目ならp=2がurlに付与されます
    'total_items' =>$all_num,//全データ数
);
$pagination = Pagination::forge('pagination',$config);

//1ページ分のデータ取得
$list_item = 何らかの処理//select * from *** where *** limit 0,10とかですね

//viewの設定
$view = View::forge('template');
$view->set('list_item',$list_item);
return $view;

HTML部分の実装

<!-- jqueryとautopagerの読込み -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/**/jquery.min.js"></script>
<?php echo Asset::js('jquery.autopager-1.0.0.js'); ?>

<!-- リスト部分 -->
<ul Id="list">
<?php foreach ($list_item as $item) { ?>
    <li><?php echo $item['title']; ?></li>
<?php } ?>
</ul>

<!-- もっと見るボタン（＝次へボタン） -->
<div id="more">
<?php
  Pagination::instance('pagination')->__set(array(
    'next-link' => '<a href="{uri}">もっとみる</a>',
    'next-inactive-link' => ''
  ));
  echo Pagination::instance('pagination')->next();
?>
</div>

<!-- autopager.jsを使ったjavascript部分の実装 -->
<script>
$.autopager({
  content: '#list',
  link: '#more a',
  autoLoad: false,
  start: function(current, next) {
    $('.more a').hide();
  },
});
$('#more a').click(function() {
  $.autopager('load');
  return false;
});
</script>

リンク集へ