省略記号（…）付きCSVページネーションを作る方法
省略記号（…）付きCSVページネーションを作る方法を紹介します。CSVファイルに保存した社員データをPHPで読み込み、1ページごとに一定件数ずつ表示しながら、現在のページ周辺だけを表示し、それ以外のページ番号は「…」で省略するページネーションを実装するサンプルです。
このサンプルでは、CSVの社員データを1ページ10件ずつ表示し、総ページ数が多い場合でもページ番号をすべて並べることなく、現在のページ付近と先頭・末尾のページ番号だけを表示します。間のページは省略記号（…）でまとめて表示するため、ページネーションが長くなりすぎず、見やすい一覧画面を作成できます。
社員一覧、顧客一覧、商品一覧など、大量のCSVデータを扱うWebシステムに向いています。ページ数が増えてもコンパクトなページネーションを維持できるため、管理画面や検索結果一覧などでも使いやすく、表示するページ番号の範囲はコード内で自由にカスタマイズできます。
コードについて
本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
社員一覧
| 社員番号 | 氏名 | 部署 | 役職 | 出身地 |
|---|---|---|---|---|
| 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);
// 表示するページ番号を入れる配列
$pagination_items = [];
// 総ページ数が7ページ以下の場合はすべて表示
if ($total_pages <= 7) {
for ($i = 1; $i <= $total_pages; $i++) {
$pagination_items[] = $i;
}
// 現在ページが前半の場合
} elseif ($page <= 4) {
for ($i = 1; $i <= 6; $i++) {
$pagination_items[] = $i;
}
$pagination_items[] = '…';
$pagination_items[] = $total_pages;
// 現在ページが後半の場合
} elseif ($page >= $total_pages - 3) {
$pagination_items[] = 1;
$pagination_items[] = '…';
for ($i = $total_pages - 3; $i <= $total_pages; $i++) {
$pagination_items[] = $i;
}
// 現在ページが中央付近の場合
} else {
$pagination_items[] = 1;
$pagination_items[] = '…';
$pagination_items[] = $page - 1;
$pagination_items[] = $page;
$pagination_items[] = $page + 1;
$pagination_items[] = '…';
$pagination_items[] = $total_pages;
}
?>
<!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-ellipsis_wrap">
<h1 class="csv-pagination-ellipsis_title">社員一覧</h1>
<div class="csv-pagination-ellipsis_table-wrap">
<table class="csv-pagination-ellipsis_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-ellipsis_nav" aria-label="ページネーション">
<?php foreach ($pagination_items as $item): ?>
<?php if ($item === '…'): ?>
<span class="csv-pagination-ellipsis_dots">…</span>
<?php elseif ($item === $page): ?>
<span class="csv-pagination-ellipsis_current"><?= $item ?></span>
<?php else: ?>
<a href="?page=<?= $item ?>"><?= $item ?></a>
<?php endif; ?>
<?php endforeach; ?>
</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を編集してください。
このサンプルでは総ページ数が多い場合、現在のページ位置に応じてページ番号を自動で省略表示します。例えば1ページ目では「1 2 3 4 5 6 … 10」、5ページ目では「1 … 4 5 6 … 10」、10ページ目では「1 … 7 8 9 10」のように表示され、必要なページ番号だけを表示することで、長いページネーションでも見やすく操作しやすい一覧画面になります。
コメント