最初・最後へ移動できるCSVページネーションを作る方法
最初・最後へ移動できるCSVページネーションを作る方法を紹介します。CSVファイルに保存した社員データをPHPで読み込み、1ページごとに一定件数ずつ表示しながら、ページ番号に加えて「最初」「最後」ボタンで先頭ページや最終ページへ移動できるサンプルです。
このサンプルでは、CSVの社員データを1ページ10件ずつ表示します。現在のページ番号をPHPで取得し、表示開始位置を計算して、該当するデータだけをテーブルに出力します。ページ数が多い一覧でも、「最初」「最後」ボタンを使うことで目的の端のページへすばやく移動できます。
社員一覧、顧客一覧、商品一覧など、件数の多いCSVデータを扱う一覧画面に向いています。ページ番号だけでは移動しにくい場合でも、先頭・末尾への移動ボタンを追加することで、より使いやすいページネーションになります。
コードについて
本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
社員一覧
| 社員番号 | 氏名 | 部署 | 役職 | 出身地 |
|---|---|---|---|---|
| 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>
<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=1">最初</a>
<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>
<a href="?page=<?= $total_pages ?>">最後</a>
<?php endif; ?>
</nav>
</div>
</body>
</html>ファイル構成と設置方法
このサンプルはPHP・CSS・CSVの3ファイルで構成されています。PHPでCSVファイルを読み込み、1ページごとに表示する社員データを切り替えます。CSSは一覧表とページネーションのデザインを担当し、CSVには表示する社員データを保存します。
sample/
├── index.php
├── style.css
└── data.csv
sampleフォルダごとPHPが利用できるサーバーへ設置してください。ブラウザからsample/index.phpへアクセスすると、CSVファイルに保存された社員データが1ページ10件ずつ表示されます。表示件数を変更したい場合はindex.php内の$per_page、社員データを変更したい場合はdata.csvを編集してください。
コメント