SlideShare a Scribd company logo
1 of 19
ページネータ の お 話 です ヨ !
今、喋ってるヤツ! 一人称 は 俺 って 言 います 俺の名は オガーン 今後ともよろしく プログラムとか デザインとか Web系 全般
ページネータとは? <<  < 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10  >  >> <<  < 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10  >  >> ID Name Email Created Modified 1 Jinmu [email_address] 2011.07.01 2011.07.01 2 Suizei [email_address] 2011.07.01 2011.07.01 3 Annei [email_address] 2011.07.02 2011.07.02 4 Itoku [email_address] 2011.07.02 2011.07.02
ページネータの構成要素 first last prev next numbers 最初のページ 最後のページ 前のページ 次のページ 付近のページ番号
基本的な構造 <?php echo  $paginator->first(' 最初 ') ?> <span> <a href=”/users/index/page:1”> 最初 </a> </span>
first、prev、next、last <?php echo  $paginator->first(' 最初 ') ?> <?php echo  $paginator->prev(' 前 ') ?> <?php echo  $paginator->next(' 次 ') ?> <?php echo  $paginator->last(' 最後 ') ?> <span><a href=”/users/index/page:1”> 最初 </a></span> <span class=”prev”><a href=”/users/index/page:3”> 前 </a></span> <span class=”next”><a href=”/users/index/page:5”> 次 </a></span> <span><a href=”/users/index/page:128”> 最後 </a></span>
注意点 next() 、 prev() は 問題ない first() 、 last() は クラス名つかない リンク先がない場合 何も表示しない
first、prev、next、last <?php echo  $paginator->first(' 最初 ') ?> <?php echo  $paginator->prev(' 前 ') ?> <?php echo  $paginator->next(' 次 ') ?> <?php echo  $paginator->last(' 最後 ') ?> <span class=”prev”><a href=”/users/index/page:3”> 前 </a></span> <span class=”next”><a href=”/users/index/page:5”> 次 </a></span> <span><a href=”/users/index/page:128”> 最後 </a></span> 空&っぽ
ちょっとしたロジック <?php  if($paginator->hasPrev())  {?> <?php echo  $paginator->first(' 最初 ', array( 'class'='first') ) ?> <?php } else { ?> <span class=”first”> 最初 </span> <?php } ?> もし 1 つ前のページが存在したら ページネータつかって「最初」って表示するアルよ そうじゃなかったら 普通に HTML で「最初」って表示するアルよ 面倒 くさいで おます
numbers <?php echo  $paginator->numbers( オプション ) ?> オプション名 modulus 説明 表示するページ数を数値で指定 first 必ず表示する先頭ページのページ数を数値で指定 last 必ず表示する最後ページのページ数を数値で指定
numbers 1 | 2 ...  3 | 4 | 5 | 6 | 7 | 8 | 9  ...127 | 128 modulus last first 'first' => 2 'last' => 2 'modulus' => 7
counter <?php echo  $paginator->counter(array( 'format' =>  フォーマット )) ?> フォーマット変数 %pages% 説明 総ページ数 %page% 現在のページ番号 %count% 総レコード数 %start% 現在のページの最初のレコード番号 %end% 現在のページ最後のレコード番号
counter 全 %pages% ページのうち %page% ページ目を表示しています。 全 %count% 件のうち %start% 〜 %end% 件を表示しています。
counter 全 30 ページのうち 9 ページ目を表示しています。 全 600 件のうち 161 〜 180 件を表示しています。 %pages% %page% %count% %start% %end%
トドメを刺すよ ,[object Object]
つまりまとまりがないんだな
なので、ブロック要素で囲うぜよ!! オイラは トドメを刺す刺す 処理係!! 大
刺す刺す! <div class=”pager”> <?php if($paginator->hasPrev()) {?> <?php echo $paginator->first(' 最初 ',array( 'class'=>'first'))?> <?php } else { ?> <span class=”first”> 最初 </span> <?php } ?> <?php echo $paginator->prev(' 前 ')?> <?php echo $paginator->numbers()?> <?php echo $paginator->next(' 次 ')?> <?php if($paginator->hasNext()) {?> <?php echo $paginator->first(' 最後 ',array( 'class'=>'last'))?> <?php } else { ?> <span class=”last”> 最後 </span> <?php } ?> </div> 大
CSS自由自在 /** * Paginator のスタイル */ /*  最初  */ .pager .first  {  「最初」のテキスト  } .pager .first a {  「最初」のリンク  } /*  最後  */ .pager .last  {  「最後」のテキスト  } .pager .last a  {  「最後」のリンク  } /*  前  */ .pager .prev  {  「前」のテキスト  } .pager .prev a  {  「前」のリンク  } /*  次  */ .pager .next  {  「次」のテキスト  } .pager .next a  {  「次」のリンク  }

More Related Content

Similar to Cake php4designers

MT meets PHP - PHP conference Kansai 2013
MT meets PHP - PHP conference Kansai 2013MT meets PHP - PHP conference Kansai 2013
MT meets PHP - PHP conference Kansai 2013純生 野田
 
Ext.Directについて
Ext.DirectについてExt.Directについて
Ext.DirectについてYuki Naotori
 
Tfpモデリングスペキュレーション
TfpモデリングスペキュレーションTfpモデリングスペキュレーション
TfpモデリングスペキュレーションEiichi Hayashi
 
2005 09 17_osc2005_xoops
2005 09 17_osc2005_xoops2005 09 17_osc2005_xoops
2005 09 17_osc2005_xoopsTom Hayakawa
 
Facebook, LinkedIN & Beyond - or how the new media changed how sales people d...
Facebook, LinkedIN & Beyond - or how the new media changed how sales people d...Facebook, LinkedIN & Beyond - or how the new media changed how sales people d...
Facebook, LinkedIN & Beyond - or how the new media changed how sales people d...AdNerds
 
webを飾る技術
webを飾る技術webを飾る技術
webを飾る技術ina job
 
Fblinkedinbeyondv01 1234514863232782 1
Fblinkedinbeyondv01 1234514863232782 1Fblinkedinbeyondv01 1234514863232782 1
Fblinkedinbeyondv01 1234514863232782 1guestcaceba
 
2008.10.18 L4u Tech Talk
2008.10.18 L4u Tech Talk2008.10.18 L4u Tech Talk
2008.10.18 L4u Tech Talkmitamex4u
 
JavaScript&Firebug入門
JavaScript&Firebug入門JavaScript&Firebug入門
JavaScript&Firebug入門柴田 篤志
 
2005 10 07_kof2005_xoops
2005 10 07_kof2005_xoops2005 10 07_kof2005_xoops
2005 10 07_kof2005_xoopsTom Hayakawa
 
XMPP仕様簡単解説
XMPP仕様簡単解説XMPP仕様簡単解説
XMPP仕様簡単解説Keiichi Daiba
 
京都IT研修講座
京都IT研修講座京都IT研修講座
京都IT研修講座annulus
 
IT研修講座
IT研修講座IT研修講座
IT研修講座annulus
 
it研修講座
it研修講座it研修講座
it研修講座annulus
 
itkensyukouza2008
itkensyukouza2008itkensyukouza2008
itkensyukouza2008annulus
 
kyoto IT
kyoto ITkyoto IT
kyoto ITannulus
 

Similar to Cake php4designers (20)

最速HTML勉強会
最速HTML勉強会最速HTML勉強会
最速HTML勉強会
 
MT meets PHP - PHP conference Kansai 2013
MT meets PHP - PHP conference Kansai 2013MT meets PHP - PHP conference Kansai 2013
MT meets PHP - PHP conference Kansai 2013
 
MT meets PHP
MT meets PHPMT meets PHP
MT meets PHP
 
Ext.Directについて
Ext.DirectについてExt.Directについて
Ext.Directについて
 
Tfpモデリングスペキュレーション
TfpモデリングスペキュレーションTfpモデリングスペキュレーション
Tfpモデリングスペキュレーション
 
2005 09 17_osc2005_xoops
2005 09 17_osc2005_xoops2005 09 17_osc2005_xoops
2005 09 17_osc2005_xoops
 
Facebook, LinkedIN & Beyond - or how the new media changed how sales people d...
Facebook, LinkedIN & Beyond - or how the new media changed how sales people d...Facebook, LinkedIN & Beyond - or how the new media changed how sales people d...
Facebook, LinkedIN & Beyond - or how the new media changed how sales people d...
 
webを飾る技術
webを飾る技術webを飾る技術
webを飾る技術
 
Fblinkedinbeyondv01 1234514863232782 1
Fblinkedinbeyondv01 1234514863232782 1Fblinkedinbeyondv01 1234514863232782 1
Fblinkedinbeyondv01 1234514863232782 1
 
2008.10.18 L4u Tech Talk
2008.10.18 L4u Tech Talk2008.10.18 L4u Tech Talk
2008.10.18 L4u Tech Talk
 
Module02
Module02Module02
Module02
 
JavaScript&Firebug入門
JavaScript&Firebug入門JavaScript&Firebug入門
JavaScript&Firebug入門
 
2005 10 07_kof2005_xoops
2005 10 07_kof2005_xoops2005 10 07_kof2005_xoops
2005 10 07_kof2005_xoops
 
XMPP仕様簡単解説
XMPP仕様簡単解説XMPP仕様簡単解説
XMPP仕様簡単解説
 
京都IT研修講座
京都IT研修講座京都IT研修講座
京都IT研修講座
 
IT研修講座
IT研修講座IT研修講座
IT研修講座
 
it研修講座
it研修講座it研修講座
it研修講座
 
It01
It01It01
It01
 
itkensyukouza2008
itkensyukouza2008itkensyukouza2008
itkensyukouza2008
 
kyoto IT
kyoto ITkyoto IT
kyoto IT
 

Cake php4designers

  • 1. ページネータ の お 話 です ヨ !
  • 2. 今、喋ってるヤツ! 一人称 は 俺 って 言 います 俺の名は オガーン 今後ともよろしく プログラムとか デザインとか Web系 全般
  • 3. ページネータとは? << < 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 > >> << < 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 > >> ID Name Email Created Modified 1 Jinmu [email_address] 2011.07.01 2011.07.01 2 Suizei [email_address] 2011.07.01 2011.07.01 3 Annei [email_address] 2011.07.02 2011.07.02 4 Itoku [email_address] 2011.07.02 2011.07.02
  • 4. ページネータの構成要素 first last prev next numbers 最初のページ 最後のページ 前のページ 次のページ 付近のページ番号
  • 5. 基本的な構造 <?php echo $paginator->first(' 最初 ') ?> <span> <a href=”/users/index/page:1”> 最初 </a> </span>
  • 6. first、prev、next、last <?php echo $paginator->first(' 最初 ') ?> <?php echo $paginator->prev(' 前 ') ?> <?php echo $paginator->next(' 次 ') ?> <?php echo $paginator->last(' 最後 ') ?> <span><a href=”/users/index/page:1”> 最初 </a></span> <span class=”prev”><a href=”/users/index/page:3”> 前 </a></span> <span class=”next”><a href=”/users/index/page:5”> 次 </a></span> <span><a href=”/users/index/page:128”> 最後 </a></span>
  • 7. 注意点 next() 、 prev() は 問題ない first() 、 last() は クラス名つかない リンク先がない場合 何も表示しない
  • 8. first、prev、next、last <?php echo $paginator->first(' 最初 ') ?> <?php echo $paginator->prev(' 前 ') ?> <?php echo $paginator->next(' 次 ') ?> <?php echo $paginator->last(' 最後 ') ?> <span class=”prev”><a href=”/users/index/page:3”> 前 </a></span> <span class=”next”><a href=”/users/index/page:5”> 次 </a></span> <span><a href=”/users/index/page:128”> 最後 </a></span> 空&っぽ
  • 9. ちょっとしたロジック <?php if($paginator->hasPrev()) {?> <?php echo $paginator->first(' 最初 ', array( 'class'='first') ) ?> <?php } else { ?> <span class=”first”> 最初 </span> <?php } ?> もし 1 つ前のページが存在したら ページネータつかって「最初」って表示するアルよ そうじゃなかったら 普通に HTML で「最初」って表示するアルよ 面倒 くさいで おます
  • 10. numbers <?php echo $paginator->numbers( オプション ) ?> オプション名 modulus 説明 表示するページ数を数値で指定 first 必ず表示する先頭ページのページ数を数値で指定 last 必ず表示する最後ページのページ数を数値で指定
  • 11. numbers 1 | 2 ... 3 | 4 | 5 | 6 | 7 | 8 | 9 ...127 | 128 modulus last first 'first' => 2 'last' => 2 'modulus' => 7
  • 12. counter <?php echo $paginator->counter(array( 'format' => フォーマット )) ?> フォーマット変数 %pages% 説明 総ページ数 %page% 現在のページ番号 %count% 総レコード数 %start% 現在のページの最初のレコード番号 %end% 現在のページ最後のレコード番号
  • 13. counter 全 %pages% ページのうち %page% ページ目を表示しています。 全 %count% 件のうち %start% 〜 %end% 件を表示しています。
  • 14. counter 全 30 ページのうち 9 ページ目を表示しています。 全 600 件のうち 161 〜 180 件を表示しています。 %pages% %page% %count% %start% %end%
  • 15.
  • 18. 刺す刺す! <div class=”pager”> <?php if($paginator->hasPrev()) {?> <?php echo $paginator->first(' 最初 ',array( 'class'=>'first'))?> <?php } else { ?> <span class=”first”> 最初 </span> <?php } ?> <?php echo $paginator->prev(' 前 ')?> <?php echo $paginator->numbers()?> <?php echo $paginator->next(' 次 ')?> <?php if($paginator->hasNext()) {?> <?php echo $paginator->first(' 最後 ',array( 'class'=>'last'))?> <?php } else { ?> <span class=”last”> 最後 </span> <?php } ?> </div> 大
  • 19. CSS自由自在 /** * Paginator のスタイル */ /* 最初 */ .pager .first { 「最初」のテキスト } .pager .first a { 「最初」のリンク } /* 最後 */ .pager .last { 「最後」のテキスト } .pager .last a { 「最後」のリンク } /* 前 */ .pager .prev { 「前」のテキスト } .pager .prev a { 「前」のリンク } /* 次 */ .pager .next { 「次」のテキスト } .pager .next a { 「次」のリンク }