省略記号（…）付きCSVページネーションを作る方法
省略記号（…）付きCSVページネーションを作る方法を紹介します。このサンプルでは、CSVファイルに保存した100件の社員データをPHPで読み込み、1ページにつき10件ずつテーブルへ表示します。ページ番号が多い場合でもすべての番号を並べるのではなく、先頭側・現在のページ付近・末尾側のページ番号を表示し、その間を省略記号（…）でまとめるページネーションを作成します。
1ページ目では「1 2 3 4 … 8 9 10」のように先頭側と末尾側のページ番号を表示します。途中の5ページ目では「1 … 4 5 6 … 10」のように現在のページと前後のページ番号を表示し、離れている部分を省略記号（…）へ切り替えます。現在のページに合わせて表示内容が自動で変わるため、ページ数が多い場合でもページネーションが横に長くなりにくく、社員一覧や顧客一覧、商品一覧などに利用できます。
PHPではCSVデータの総件数から総ページ数を計算し、現在のページに必要な10件だけを取り出して表示します。さらに現在のページ番号を基準に表示するページ番号を判定し、離れたページ番号の間へ省略記号（…）を表示します。CSVのデータ件数が変わった場合も総ページ数は自動で再計算されます。CSSではテーブルの列幅や余白、背景色、枠線、角丸、ページ番号や省略記号のサイズ、色、間隔などを調整できます。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
| 社員番号 | 氏名 | 部署 | 役職 | 出身地 |
|---|
ページ番号をクリックしてください。現在のページに合わせてページ番号の一部が「…」で省略され、社員一覧が10件ずつ切り替わります。
コードをコピーして使おう！
<?php
// =========================================
// 基本設定
// =========================================
// 読み込むCSVファイル
$csv_file = 'data.csv';
// 1ページに表示する件数
// 10を変更すると、1ページに表示する社員数が変わります。
$per_page = 10;
// URLの「?page=」から現在のページ番号を取得します。
// pageが指定されていない場合は1ページ目を表示します。
$page = isset($_GET['page']) ? (int)$_GET['page'] : 1;
// 1未満のページ番号が指定された場合は1ページ目に戻します。
if ($page < 1) {
$page = 1;
}
// =========================================
// CSVデータを読み込む
// =========================================
// 社員データを保存する配列
$rows = [];
// CSVファイルを読み込み専用で開きます。
if (($handle = fopen($csv_file, 'r')) !== false) {
// 1行目の見出し行を読み込みます。
$header = fgetcsv($handle);
// 2行目以降の社員データを1行ずつ読み込みます。
while (($data = fgetcsv($handle)) !== false) {
$rows[] = $data;
}
// CSVファイルを閉じます。
fclose($handle);
}
// =========================================
// ページ数を計算する
// =========================================
// CSVに登録されている社員データの総件数
$total_items = count($rows);
// 総件数を1ページの表示件数で割り、総ページ数を計算します。
$total_pages = max(1, (int)ceil($total_items / $per_page));
// 総ページ数より大きなページ番号が指定された場合は最後のページを表示します。
if ($page > $total_pages) {
$page = $total_pages;
}
// 現在のページで最初に表示するデータ位置を計算します。
// 10件表示の場合、1ページ目は0、2ページ目は10、3ページ目は20になります。
$offset = ($page - 1) * $per_page;
// 現在のページに必要なデータだけを取り出します。
$page_rows = array_slice($rows, $offset, $per_page);
// =========================================
// 表示するページ番号を作成する
// =========================================
// ページネーションへ表示するページ番号と省略記号を保存します。
$pagination_items = [];
// 総ページ数が7ページ以下の場合は、すべてのページ番号を表示します。
if ($total_pages <= 7) {
for ($i = 1; $i <= $total_pages; $i++) {
$pagination_items[] = $i;
}
// 現在のページが1〜4ページ目の場合
// 「1 2 3 4 5 … 最終ページ」の形で表示します。
} elseif ($page <= 4) {
$pagination_items = [
1,
2,
3,
4,
5,
'dots',
$total_pages
];
// 現在のページが最後から4ページ以内の場合
// 「1 … 最後の5ページ」の形で表示します。
} elseif ($page >= $total_pages - 3) {
$pagination_items = [
1,
'dots',
$total_pages - 4,
$total_pages - 3,
$total_pages - 2,
$total_pages - 1,
$total_pages
];
// それ以外は現在ページと前後1ページを表示します。
// 「1 … 前ページ 現在ページ 次ページ … 最終ページ」の形になります。
} else {
$pagination_items = [
1,
'dots',
$page - 1,
$page,
$page + 1,
'dots',
$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>
<!-- CSSファイル -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- 社員一覧全体 -->
<div class="csv-pagination_demo">
<!-- タイトル -->
<div class="csv-pagination_title">
社員一覧
</div>
<!-- 横幅が狭い画面ではテーブル部分を横スクロールできます -->
<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_rows as $row): ?>
<tr>
<td><?= htmlspecialchars($row[0], ENT_QUOTES, 'UTF-8') ?></td>
<td><?= htmlspecialchars($row[1], ENT_QUOTES, 'UTF-8') ?></td>
<td><?= htmlspecialchars($row[2], ENT_QUOTES, 'UTF-8') ?></td>
<td><?= htmlspecialchars($row[3], ENT_QUOTES, 'UTF-8') ?></td>
<td><?= htmlspecialchars($row[4], ENT_QUOTES, 'UTF-8') ?></td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
</div>
<!-- ページネーション -->
<nav class="csv-pagination_nav" aria-label="ページネーション">
<?php foreach ($pagination_items as $item): ?>
<?php if ($item === 'dots'): ?>
<!-- 離れているページ番号を省略記号で表示 -->
<span class="csv-pagination_ellipsis" aria-hidden="true">…</span>
<?php elseif ($item === $page): ?>
<!-- 現在表示しているページ -->
<span
class="csv-pagination_page csv-pagination_active"
aria-current="page"><?= $item ?></span>
<?php else: ?>
<!-- 移動できるページ番号 -->
<a
class="csv-pagination_page"
href="?page=<?= $item ?>"><?= $item ?></a>
<?php endif; ?>
<?php endforeach; ?>
</nav>
</div>
</body>
</html>
サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
Q ダウンロードしたけど、これをネット上で動かすにはどうするの？
Googleアカウントがあれば、InfinityFreeで無料サーバーを作成して、ダウンロードしたサンプルをネット上で動かせます。
InfinityFreeを初めて利用する場合は①から、すでにサーバーを作成している場合は②へ進んでください。
ファイル構成と設置方法
このサンプルはPHP・CSS・CSVの3ファイルで構成されています。PHPでdata.csvに保存された100件の社員データを読み込み、1ページにつき10件ずつテーブルへ表示します。現在のページに応じてページ番号の一部を省略記号（…）へ置き換え、必要なページ番号だけを表示します。CSSでは社員一覧テーブルとページネーションのデザイン、横スクロール、スマートフォン向けの表示調整を行います。
sample/
├── index.php
├── style.css
└── data.csv
各ファイルの役割
index.phpはdata.csvを読み込み、現在のページに必要な社員データを取り出してテーブルへ表示するファイルです。CSVの総件数から総ページ数を計算し、現在のページに応じて「1 2 3 4 5 … 10」「1 … 4 5 6 … 10」などのページネーションを生成します。
style.cssは社員一覧テーブルとページネーションのデザインを設定するファイルです。テーブルの列幅、余白、枠線、角丸、背景色、ページ番号のサイズや間隔、現在ページの色、省略記号（…）のサイズなどを変更できます。
data.csvは社員データを保存するCSVファイルです。1行目には「社員番号、氏名、部署、役職、出身地」の見出しを記述し、2行目以降へ表示したいデータを追加します。CSVのデータ件数が変わると、index.phpが総ページ数を自動で計算します。
設置方法・使い方
sampleフォルダへindex.php、style.css、data.csvを配置し、sampleフォルダごとPHPが動作するサーバーへアップロードしてください。ブラウザからsample/index.phpへアクセスすると、data.csvの社員データが1ページにつき10件表示されます。ページ番号をクリックするとURLの?page=2などの値が切り替わり、選択したページの社員データが表示されます。現在のページに合わせてページ番号の一部が省略記号（…）へ自動で切り替わります。
PHPを動かす無料サーバーを準備する場合は、InfinityFreeで無料サーバーを作る方法を参考にしてください。sampleフォルダ内のファイルをサーバーへアップロードする方法は、InfinityFreeのFile Managerの使い方で確認できます。
カスタマイズできる内容
index.phpの$per_page = 10;を変更すると、1ページに表示するデータ件数を変更できます。data.csvでは社員番号、氏名、部署、役職、出身地の内容やデータ件数を変更できます。データを追加・削除すると、その件数を基準に総ページ数が自動で再計算されます。
style.cssでは社員一覧全体の余白、テーブルの列幅、セルの余白、枠線、角丸、背景色、ページ番号の横幅・高さ・間隔・角丸・色、省略記号（…）の表示幅や文字サイズなどを変更できます。
数値調整
index.php
$per_page = 10;
1ページに表示するデータ件数です。10を大きくすると1ページに表示される社員数が増え、小さくすると少なくなります。CSVの総件数とこの値を基準に総ページ数が自動で計算されます。
style.css
padding:40px 20px;
ページ全体の余白です。40pxは上下、20pxは左右の余白です。値を大きくすると画面端との間隔が広がります。
padding:24px;
社員一覧全体の内側余白です。値を大きくするとテーブルと外側との間隔が広がり、小さくすると狭くなります。
font-size:28px;
「社員一覧」タイトルの文字サイズです。値を大きくするとタイトルが大きくなり、小さくすると控えめになります。
min-width:760px;
社員一覧テーブルの最小横幅です。値を大きくするとテーブルが横に広がります。画面幅が不足する場合はテーブル部分を横スクロールできます。
width:110px;・180px・180px・120px・170px
社員番号、氏名、部署、役職、出身地の各列の横幅です。それぞれの値を変更すると対応する列の表示幅を調整できます。
padding:14px 16px;
テーブルセルの内側余白です。14pxは上下、16pxは左右の余白です。値を大きくするとセル内の余白が広がります。
border-radius:18px;
テーブル全体の角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
gap:8px;
ページ番号と省略記号（…）の間隔です。値を大きくすると各項目の間隔が広がり、小さくすると近くなります。
margin-top:24px;
テーブルとページネーションの間隔です。24pxを大きくすると上下の間隔が広がり、小さくすると狭くなります。
min-width:42px;
ページ番号の最小横幅です。値を大きくするとページ番号のボタンが横に広がります。
height:42px;
ページ番号の高さです。値を大きくするとボタンが高くなり、小さくすると低くなります。
padding:0 12px;
ページ番号の左右の内側余白です。12pxを大きくするとページ番号の横幅が広がります。
border-radius:10px;
ページ番号の角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
font-size:18px;
省略記号（…）の文字サイズです。値を大きくすると省略記号が大きくなり、小さくすると小さくなります。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%で社員一覧全体を画面幅に合わせ、テーブルにはmin-width:760px;、テーブルを囲む部分にはoverflow-x:auto;を指定しています。そのため、テーブルの横幅を確保できない画面ではテーブル部分だけを横スクロールできます。また、640px以下ではページ全体の余白を24px 12px、社員一覧の余白を16px 0、ページ番号の最小横幅と高さを38pxへ変更し、スマートフォン・タブレット・PCで利用しやすい表示に調整しています。
コメント