[CakePHP] ページングした際、ビュー内で4個ずつ表示

例)オンラインショップの商品一覧で、詳細表示から画像表示に切り替えた際に使用。
foreachのループの中で剰余をつかうことで、改行する箇所を特定し、必要なHTMLタグを出力する。

■app/views/items/index.ctp

<?php if (!empty($items)) : ?>
	<table class="imgList">
		<tr>
			<?php $lastItem = $this->params['paging']['Item']['current']; ?>
			<?php $i = 1; ?>
			<?php $j = 4 - $i % 4; ?>
			<?php foreach ($items as $key => $val) : ?>
				<?php
					$item = $val['Item'];
					$shop = $val['Shop'];
				?>
				<td>
					<div class="itemSection">

						<?php echo $html->image(IMAGES_URL.'item'.DS.$item['id'].DS.'130.jpg',
						array('alt'=>$item['name'], 'width' => 100, 'class' => 'itemListImg')) ?>

						<p class="itemName"><?php echo $html->link($item['name'], DS.'items'.DS.'detail'.DS.$item['id'])?></p>
						<p class="itemPrice">¥<?php echo number_format($item['price'])?></p>
						<p class="shopName"><?php echo $shop['name']?></p>
					</div>
				</td>
				<?php if ($i % 4 == 0) : ?>
					</tr>
				<?php elseif ($i == $lastItem) : ?>
					<?php for ($k = 1; $k <= $j; $k++) : ?>
						<td> </td>
					<?php endfor; ?>
				<?php endif; ?>
				<?php $i++; ?>
			<?php endforeach; ?>
	</table>
<?php endif; ?>

■app/webroot/css/内のCSSファイル

 table.imgList td{
   border-bottom: 1px dotted #333;
   padding: 10px 0;
   margin-top: 10px;
   width: 25%;
   vertical-align: top;
}
 div.itemSection{
  margin-left: 10px;
  }
  div.itemSection img.itemListImg {
    margin: 0 auto;
    text-align: center;
    display: block;
    border:1px solid #999;
}
こちらもあわせてどうぞ
  1. [MySQL] 実践的な更新
  2. [CakePHP] CMSのページ生成機能にカラーピッカーをつける
  3. [MySQL] 実践的な検索(複数のテーブルの結合)
  4. [CakePHP] TinyMCEヘルパー(見たまま編集エディター)
  5. [CakePHP] Debugkit(デバッグツール)
  6. [CakePHP] Formヘルパーの拡張
  7. [CakePHP] BakeSale(オープンソースのショッピングカート)
HatenaGoogle BookmarksYahoo BookmarksFacebook

コメントする

*