前へ・次へボタン付きCSVページネーションを作る方法
前へ・次へボタン付きCSVページネーションを作る方法を紹介します。CSVファイルに保存した社員データをPHPで読み込み、1ページごとに一定件数ずつ表示しながら、ページ番号に加えて「前へ」「次へ」ボタンで前後のページへ移動できるサンプルです。
このサンプルでは、CSVに保存した社員データを1ページ10件ずつ表示します。現在のページ番号をPHPで取得し、表示開始位置を計算して、該当するデータだけをテーブルに出力します。現在ページより前のページがある場合は「前へ」、次のページがある場合は「次へ」を表示します。
社員一覧、顧客一覧、商品一覧など、複数ページに分けて確認したいデータ一覧に利用できます。ページ番号だけでなく前後移動ボタンを付けることで、連続してデータを確認しやすいページネーションになります。
コードについて
本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
社員一覧
| 社員番号 | 氏名 | 部署 | 役職 | 出身地 |
|---|---|---|---|---|
| 1001 | 山田 太郎 | 営業部 | 主任 | 東京都 |
| 1002 | 佐藤 花子 | 営業部 | 一般 | 神奈川県 |
| 1003 | 鈴木 一郎 | 営業部 | 係長 | 大阪府 |
| 1004 | 高橋 美咲 | 営業部 | 一般 | 愛知県 |
| 1005 | 田中 健 | 営業部 | 課長 | 福岡県 |
| 1006 | 伊藤 彩 | 営業部 | 一般 | 北海道 |
| 1007 | 渡辺 翔 | 営業部 | 主任 | 宮城県 |
| 1008 | 中村 優 | 営業部 | 一般 | 京都府 |
| 1009 | 小林 誠 | 営業部 | 係長 | 兵庫県 |
| 1010 | 加藤 愛 | 営業部 | 一般 | 広島県 |
コードをコピーして使おう！
<?php
// CSVファイル名
$csv_file = 'data.csv';
// 1ページに表示する件数
$per_page = 10;
// 現在のページ番号を取得
$page = isset($_GET['page']) ? (int)$_GET['page'] : 1;
// ページ番号が1未満の場合は1に戻す
if ($page < 1) {
$page = 1;
}
// 社員データを入れる配列
$employees = [];
// CSVファイルを開く
if (($handle = fopen($csv_file, 'r')) !== false) {
// 1行目の見出し行を読み飛ばす
fgetcsv($handle);
// CSVを1行ずつ読み込む
while (($row = fgetcsv($handle)) !== false) {
// 社員データを配列へ追加
$employees[] = $row;
}
// CSVファイルを閉じる
fclose($handle);
}
// 総件数
$total_count = count($employees);
// 総ページ数
$total_pages = (int)ceil($total_count / $per_page);
// 現在ページが総ページ数を超えた場合は最後のページへ戻す
if ($total_pages > 0 && $page > $total_pages) {
$page = $total_pages;
}
// 表示開始位置
$offset = ($page - 1) * $per_page;
// 現在のページに表示するデータだけ取得
$page_employees = array_slice($employees, $offset, $per_page);
?>
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- 文字コード -->
<meta charset="UTF-8">
<!-- 画面幅に合わせて表示 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- ページタイトル -->
<title>CSVを使ったページネーション</title>
<!-- CSSファイルを読み込み -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- 全体エリア -->
<div class="csv-pagination_wrap">
<!-- 見出し -->
<h1 class="csv-pagination_title">社員一覧</h1>
<!-- テーブル横スクロール用エリア -->
<div class="csv-pagination_table-wrap">
<!-- 社員一覧テーブル -->
<table class="csv-pagination_table">
<thead>
<tr>
<th>社員番号</th>
<th>氏名</th>
<th>部署</th>
<th>役職</th>
<th>出身地</th>
</tr>
</thead>
<tbody>
<?php foreach ($page_employees as $employee): ?>
<!-- 社員データ -->
<tr>
<td><?= htmlspecialchars($employee[0], ENT_QUOTES, 'UTF-8') ?></td>
<td><?= htmlspecialchars($employee[1], ENT_QUOTES, 'UTF-8') ?></td>
<td><?= htmlspecialchars($employee[2], ENT_QUOTES, 'UTF-8') ?></td>
<td><?= htmlspecialchars($employee[3], ENT_QUOTES, 'UTF-8') ?></td>
<td><?= htmlspecialchars($employee[4], ENT_QUOTES, 'UTF-8') ?></td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
</div>
<!-- ページネーション -->
<nav class="csv-pagination_nav" aria-label="ページネーション">
<?php if ($page > 1): ?>
<a href="?page=<?= $page - 1 ?>">前へ</a>
<?php endif; ?>
<?php for ($i = 1; $i <= $total_pages; $i++): ?>
<?php if ($i === $page): ?>
<!-- 現在のページ -->
<span class="csv-pagination_current"><?= $i ?></span>
<?php else: ?>
<!-- ページリンク -->
<a href="?page=<?= $i ?>"><?= $i ?></a>
<?php endif; ?>
<?php endfor; ?>
<?php if ($page < $total_pages): ?>
<a href="?page=<?= $page + 1 ?>">次へ</a>
<?php endif; ?>
</nav>
</div>
</body>
</html>ファイル構成と設置方法
このサンプルは、PHP・CSS・CSVの3ファイルで構成されています。PHPでCSVファイルを読み込み、社員データを1ページ10件ずつ表示します。ページ番号に加えて「前へ」「次へ」ボタンから前後のページへ移動できるページネーションを実装しています。
sample/
├── index.php
├── style.css
└── data.csv
sampleフォルダごとPHPが利用できるWebサーバーへ設置し、ブラウザでsample/index.phpへアクセスしてください。表示する社員データはdata.csvを編集するだけで反映されます。1ページあたりの表示件数はindex.php内の「$per_page」の値を変更することで調整できます。
コメント