PHP
php
<?php
function pager($c, $t) {
$current_page = $c; //現在のページ
$total_rec = $t; //総レコード数
$page_rec = 10; //1ページに表示するレコード
$total_page = ceil($total_rec / $page_rec); //総ページ数
$show_nav = 5; //表示するナビゲーションの数
$path = '?page='; //パーマリンク
//全てのページ数が表示するページ数より小さい場合、総ページを表示する数にする
if ($total_page < $show_nav) {
$show_nav = $total_page;
}
//トータルページ数が2以下か、現在のページが総ページより大きい場合表示しない
if ($total_page <= 1 || $total_page < $current_page ) return;
//総ページの半分
$show_navh = floor($show_nav / 2);
//現在のページをナビゲーションの中心にする
$loop_start = $current_page - $show_navh;
$loop_end = $current_page + $show_navh;
//現在のページが両端だったら端にくるようにする
if ($loop_start <= 0) {
$loop_start = 1;
$loop_end = $show_nav;
}
if ($loop_end > $total_page) {
$loop_start = $total_page - $show_nav +1;
$loop_end = $total_page;
}
?>
<div id="pagenation">
<ul>
<?php
//2ページ移行だったら「一番前へ」を表示
if ( $current_page > 2) echo '<li class="prev"><a href="'. $path .'1">«</a></li>';
//最初のページ以外だったら「前へ」を表示
if ( $current_page > 1) echo '<li class="prev"><a href="'. $path . ($current_page-1).'">‹</a></li>';
for ($i=$loop_start; $i<=$loop_end; $i++) {
if ($i > 0 && $total_page >= $i) {
if($i == $current_page) echo '<li class="active">';
else echo '<li>';
echo '<a href="'. $path . $i.'">'.$i.'</a>';
echo '</li>';
}
}
//最後のページ以外だったら「次へ」を表示
if ( $current_page < $total_page) echo '<li class="next"><a href="'. $path . ($current_page+1).'">›</a></li>';
//最後から2ページ前だったら「一番最後へ」を表示
if ( $current_page < $total_page - 1) echo '<li class="next"><a href="'. $path . $total_page.'">»</a></li>';
?>
</ul>
</div>
<?php
}
?>
パーマリンクは8行目の「$path 」です。
パラメータタイプになっているので、最近のWebではあれだよねと思った方は変更してください。
31行目移行が出力しているところです。
なんでリストでマークアップしてんだよ!と思った方は変更してください。
使うときはこうです。
php
//現在のページ, 総レコード数 pager(1, 120);
現在のページ、総レコード数の順で引数を入れます。
CSS
ついでにCSSです。
css
div#pagenation {
position: relative;
overflow: hidden;
}
div#pagenation ul {
position:relative;
left:50%;
float:left;
list-style: none;
}
div#pagenation li {
position:relative;
left:-50%;
float:left;
}
div#pagenation li a {
border:1px solid #CECECE;
margin: 0 3px;
padding:3px 7px;
display: block;
text-decoration:none;
color: #666666;
background: #fff;
}
div#pagenation li.active a,
div#pagenation li a:hover{
border:solid 1px #666666;
color: #FFFFFF;
background: #3399FF;
}

