前へ・次へボタンを付きCSVページネーションを作る方法
前へ・次へボタンを付きCSVページネーションを作る方法を紹介します。このサンプルでは、CSVファイルに保存した100件の社員データをPHPで読み込み、1ページにつき10件ずつテーブルへ表示します。基本のCSVページネーションに「前へ」「次へ」ボタンを追加し、ページ番号を直接クリックするだけでなく、現在表示しているページを基準に1ページずつ前後へ移動できるようにします。
ページ下部には1〜10のページ番号と「前へ」「次へ」ボタンを表示します。「前へ」をクリックすると現在のページから1つ前へ、「次へ」をクリックすると1つ後のページへ移動します。1ページ目では「前へ」、10ページ目では「次へ」を無効表示にするため、存在しないページへ移動することはありません。社員一覧や顧客一覧、商品一覧など、CSVで管理している多くのデータを順番に確認したい管理画面や会員サイトなどで利用できます。
PHPではCSVデータの総件数から必要なページ数を自動で計算し、現在のページに必要な10件だけを取り出して表示します。CSVへデータを追加・削除した場合も総件数に応じてページ数が変わり、1ページに表示する件数はPHPから変更できます。CSSではテーブルの列幅や余白、背景色、枠線、角丸、ページ番号や「前へ」「次へ」ボタンのサイズや色を調整できます。画面幅が狭い場合はテーブル部分を横スクロールできるため、スマートフォン・タブレット・PCでも社員データを確認できます。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
| 社員番号 | 氏名 | 部署 | 役職 | 出身地 |
|---|
「前へ」「次へ」または1〜10のページ番号をクリックして、社員一覧が10件ずつ切り替わることを確認してください。
コードをコピーして使おう！
<?php
// =========================================
// CSVファイルの設定
// =========================================
// 読み込むCSVファイルを指定します。
// index.phpと同じ階層にdata.csvを配置します。
// ファイル名を変更する場合は、ここも同じ名前に変更してください。
$csv_file = 'data.csv';
// 1ページに表示する件数です。
// 10を20に変更すると、1ページに20件表示されます。
// 表示件数を変更すると、CSVの総件数に合わせて総ページ数も自動で変わります。
$per_page = 10;
// =========================================
// 現在のページ番号を取得
// =========================================
// URLの「?page=2」のような値から現在のページ番号を取得します。
// pageが指定されていない場合は1ページ目を表示します。
$page = isset($_GET['page']) ? (int)$_GET['page'] : 1;
// 0やマイナス値が指定された場合は1ページ目に戻します。
if ($page < 1) {
$page = 1;
}
// =========================================
// CSVから社員データを読み込む
// =========================================
// CSVから読み込んだ社員データを保存する配列です。
$employees = [];
// CSVファイルを読み込みモードで開きます。
if (($handle = fopen($csv_file, 'r')) !== false) {
// CSVの1行目は
// 「社員番号,氏名,部署,役職,出身地」という見出しなので読み飛ばします。
fgetcsv($handle);
// CSVの2行目以降を1行ずつ読み込みます。
while (($row = fgetcsv($handle)) !== false) {
// 読み込んだ1件分の社員データを配列へ追加します。
$employees[] = $row;
}
// 読み込みが完了したCSVファイルを閉じます。
fclose($handle);
}
// =========================================
// ページネーションに必要な値を計算
// =========================================
// CSVから読み込んだ社員データの総件数を取得します。
$total_count = count($employees);
// 総件数を1ページの表示件数で割って総ページ数を計算します。
// 100件を10件ずつ表示する場合は10ページになります。
$total_pages = (int)ceil($total_count / $per_page);
// 存在するページ数より大きなページ番号が指定された場合は、
// 最後のページを表示します。
if ($total_pages > 0 && $page > $total_pages) {
$page = $total_pages;
}
// 現在のページで何件目から表示するかを計算します。
// 1ページ目は0件目、2ページ目は10件目から取得します。
$offset = ($page - 1) * $per_page;
// 全社員データから、現在のページに必要な件数だけ取り出します。
$page_employees = array_slice($employees, $offset, $per_page);
?>
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- 文字コードをUTF-8に設定します -->
<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>
<!--
ページ全体の表示エリアです。
社員一覧やページネーション全体の余白を変更したい場合は、
style.cssの.csv-pagination_wrapを調整します。
-->
<div class="csv-pagination_wrap">
<!--
社員一覧のタイトルです。
ここは表示する内容に合わせて自由に書き換えられます。
-->
<div class="csv-pagination_title">社員一覧</div>
<!--
テーブルを囲むエリアです。
画面幅が狭い場合は、このエリア内で横スクロールできます。
-->
<div class="csv-pagination_table-wrap">
<!--
CSVから読み込んだ社員データを表示するテーブルです。
列を変更する場合は、data.csvの項目と合わせて変更してください。
-->
<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): ?>
<!--
現在のページに該当する社員データを1件ずつ表示します。
CSVの1列目から5列目までを順番に出力しています。
-->
<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="ページネーション">
<!--
2ページ目以降では現在ページの1つ前へ移動します。
1ページ目では移動先がないため無効表示にします。
-->
<?php if ($page > 1): ?>
<a class="csv-pagination_prev" href="?page=<?= $page - 1 ?>">前へ</a>
<?php else: ?>
<span class="csv-pagination_prev csv-pagination_disabled">前へ</span>
<?php endif; ?>
<!--
CSVの総件数と$per_pageから計算したページ数だけ、
1、2、3…のページ番号を自動で表示します。
-->
<?php for ($i = 1; $i <= $total_pages; $i++): ?>
<?php if ($i === $page): ?>
<!-- 現在表示しているページ番号です -->
<span class="csv-pagination_current"><?= $i ?></span>
<?php else: ?>
<!--
別ページへ移動するページ番号リンクです。
クリックすると「?page=2」のようにページ番号をURLへ渡します。
-->
<a class="csv-pagination_page" href="?page=<?= $i ?>"><?= $i ?></a>
<?php endif; ?>
<?php endfor; ?>
<!--
最後のページより前では現在ページの1つ後へ移動します。
最後のページでは移動先がないため無効表示にします。
-->
<?php if ($page < $total_pages): ?>
<a class="csv-pagination_next" href="?page=<?= $page + 1 ?>">次へ</a>
<?php else: ?>
<span class="csv-pagination_next csv-pagination_disabled">次へ</span>
<?php endif; ?>
</nav>
</div>
</body>
</html>サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
Q ダウンロードしたけど、これをネット上で動かすにはどうするの？
Googleアカウントがあれば、InfinityFreeで無料サーバーを作成して、ダウンロードしたサンプルをネット上で動かせます。
InfinityFreeを初めて利用する場合は①から、すでにサーバーを作成している場合は②へ進んでください。
ファイル構成と設置方法
このサンプルはPHP、CSS、CSVの3ファイルで構成されています。PHPでdata.csvに保存した100件の社員データを読み込み、1ページにつき10件ずつテーブルへ表示します。CSVの総件数からページ数を自動で計算し、1〜10のページ番号に加えて「前へ」「次へ」ボタンを表示します。PHPを使用するため、sampleフォルダはPHPが動作するサーバーへ配置して使用します。
sample/
├── index.php
├── style.css
└── data.csv
各ファイルの役割
index.phpはdata.csvを読み込み、社員データの総件数、総ページ数、現在のページ番号、表示開始位置を計算するファイルです。現在のページに必要な10件を取り出してテーブルへ表示し、ページ番号と「前へ」「次へ」のリンクを生成します。1ページ目では「前へ」、最後のページでは「次へ」を無効表示にします。
style.cssは社員一覧テーブルとページネーションのデザインを設定するファイルです。テーブルの列幅や余白、背景色、枠線、角丸、ページ番号、「前へ」「次へ」ボタンのサイズや色などを変更できます。
data.csvは社員番号、氏名、部署、役職、出身地の5項目からなる100件の社員データを保存するファイルです。社員データを追加・削除・変更すると、index.phpがCSVを読み込み直して表示内容と総ページ数を計算します。
設置方法・使い方
sampleフォルダへindex.php、style.css、data.csvを同じ階層で配置し、sampleフォルダごとPHPが動作するサーバーへアップロードしてください。ブラウザからsample/index.phpへアクセスすると、CSVに保存された社員データが1ページ10件ずつ表示されます。1〜10のページ番号をクリックすると指定したページへ移動し、「前へ」をクリックすると現在のページから1ページ前、「次へ」をクリックすると1ページ後へ移動します。
PHPを動かす無料サーバーを準備する場合は、InfinityFreeで無料サーバーを作る方法を参考にしてください。sampleフォルダ内のファイルをサーバーへアップロードする方法は、InfinityFreeのFile Managerの使い方で確認できます。
カスタマイズできる内容
data.csvでは社員番号、氏名、部署、役職、出身地のデータを追加・削除・変更できます。index.phpでは$per_pageを変更して1ページに表示する件数を調整できます。style.cssでは社員一覧全体の余白、テーブルの列幅、セルの余白、背景色、枠線、角丸、ページ番号、「前へ」「次へ」ボタンのサイズ、色、間隔などを変更できます。
数値調整
index.php
$per_page = 10;
1ページに表示する社員データの件数です。10を20へ変更すると1ページ20件になり、100件のCSVデータでは全5ページになります。CSVの総件数に応じて総ページ数は自動で計算されます。
style.css
margin:40px auto;
社員一覧全体の上下余白です。40pxを大きくすると上下の間隔が広がり、小さくすると狭くなります。
padding:24px;
社員一覧全体の内側余白です。24pxを大きくすると内容と外側の間隔が広がります。
font-size:28px;
「社員一覧」の文字サイズです。値を大きくすると見出しが大きくなり、小さくすると小さくなります。
border-radius:18px;
テーブルを囲む外枠の角丸です。18pxを大きくすると丸みが強くなり、0にすると四角になります。
min-width:760px;
テーブルの最小横幅です。値を大きくするとテーブルが横に広がり、画面幅が狭い場合に横スクロールする範囲も変わります。
width:110px;、180px、180px、120px、170px
社員番号、氏名、部署、役職、出身地の各列の横幅です。それぞれの値を変更すると対応する列の幅が変わります。
padding:14px 16px;
テーブルセルの内側余白です。14pxは上下、16pxは左右の余白で、値を大きくするとセル内の余白が広がります。
gap:8px;
ページ番号と「前へ」「次へ」ボタン同士の間隔です。8pxを大きくすると各ボタンの間隔が広がります。
margin-top:24px;
テーブルとページネーションの間隔です。24pxを大きくすると間隔が広がります。
min-width:42px;とheight:42px;
ページ番号と「前へ」「次へ」ボタンの最小横幅と高さです。値を大きくするとボタンが大きくなります。
padding:0 12px;
ページ番号と「前へ」「次へ」ボタンの左右の内側余白です。12pxを大きくすると文字の左右の余白が広がります。
border-radius:10px;
ページ番号と「前へ」「次へ」ボタンの角丸です。10pxを大きくすると丸みが強くなり、0にすると四角になります。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%で社員一覧全体を利用できる横幅に合わせ、テーブルにはmin-width:760px、テーブルを囲むエリアにはoverflow-x:autoを設定しています。画面幅600px以下ではmargin:24px auto;、padding:16px;、見出しのfont-size:24px;へ変更します。ページネーションはflex-wrap:wrapで折り返せるため、スマートフォン・タブレット・PCで利用できます。
コメント