CSVデータを読み込んでページネーションを作る方法
CSVデータを読み込んでページネーションを作る方法を紹介します。このサンプルでは、CSVファイルに保存した100件の社員データをPHPで読み込み、1ページにつき10件ずつテーブルへ表示します。社員番号・氏名・部署・役職・出身地のデータを全10ページに分けることで、CSVに保存された多くのデータを一度に表示せず、ページごとに整理して確認できます。
ページ下部には1〜10のページ番号を表示し、クリックしたページ番号に応じてPHPが表示対象のデータを切り替えます。1ページ目では社員番号1001〜1010、2ページ目では1011〜1020というように、CSVデータを10件単位で表示します。社員一覧や顧客一覧、商品一覧など、CSVで管理しているデータを管理画面やWebページで分割表示したい場合に利用できます。
PHPではCSVファイルを読み込み、データの総件数から必要なページ数を自動で計算して、現在のページに必要なデータだけを取り出します。1ページに表示する件数はPHPから変更でき、CSVへデータを追加・削除した場合も総件数に応じてページ数が自動で変わります。CSSではテーブルの列幅や余白、背景色、枠線、角丸、ページ番号のサイズや色などを調整でき、画面幅が狭い場合はテーブルを横スクロールして内容を確認できます。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
| 社員番号 | 氏名 | 部署 | 役職 | 出身地 |
|---|
ページ番号をクリックすると、社員一覧が10件ずつ切り替わります。1〜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">
<!--
社員一覧のタイトルです。
ここは表示する内容に合わせて自由に書き換えられます。
-->
<h1 class="csv-pagination_title">社員一覧</h1>
<!--
テーブルを囲むエリアです。
画面幅が狭い場合は、このエリア内で横スクロールできます。
-->
<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>
<!--
ページネーション部分です。
CSVの総件数と$per_pageから計算したページ数だけ、
1、2、3…のページ番号を自動で表示します。
-->
<nav class="csv-pagination_nav" aria-label="ページネーション">
<?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; ?>
</nav>
</div>
</body>
</html>サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
Q ダウンロードしたけど、これをネット上で動かすにはどうするの？
Googleアカウントがあれば、InfinityFreeで無料サーバーを作成して、ダウンロードしたサンプルをネット上で動かせます。
InfinityFreeを初めて利用する場合は①から、すでにサーバーを作成している場合は②へ進んでください。
ファイル構成と設置方法
このサンプルはPHP・CSV・CSSの3ファイルで構成されています。PHPではdata.csvに保存した100件の社員データを読み込み、1ページにつき10件ずつ表示します。CSVの総件数からページ数を自動で計算し、ページ番号をクリックするとURLのpageパラメータに応じて表示する社員データを切り替えます。CSSでは社員一覧テーブルとページネーションのデザインを設定します。PHPを使用するため、PHPが動作するサーバー環境が必要です。
sample/
├── index.php
├── style.css
└── data.csv
各ファイルの役割
index.phpはdata.csvを読み込み、社員データの総件数、総ページ数、現在のページに表示するデータを計算するファイルです。社員一覧テーブルのHTMLもこのファイルに記述されており、現在のページに該当する10件のデータとページ番号を出力します。
style.cssは社員一覧テーブルとページネーションのデザインを設定するファイルです。全体の余白、テーブルの列幅、背景色、文字色、枠線、角丸、ページ番号のサイズや現在ページの強調表示などを変更できます。
data.csvは社員データを保存するファイルです。1行目に「社員番号・氏名・部署・役職・出身地」の項目名を記述し、2行目以降に100件の社員データを保存しています。表示するデータを変更・追加・削除する場合は、このファイルを編集します。
設置方法・使い方
sampleフォルダへindex.php、style.css、data.csvを配置し、sampleフォルダごとPHPが動作するサーバーへアップロードしてください。3ファイルは同じ階層へ配置します。
無料サーバーを用意する場合は、InfinityFreeで無料サーバーを作る方法を参考にしてください。ファイルのアップロード方法は、InfinityFreeのFile Managerの使い方で確認できます。
アップロード後にsample/index.phpへブラウザからアクセスすると、data.csvの先頭から10件の社員データが表示されます。ページ下部の「2」「3」などのページ番号をクリックすると、URLが?page=2、?page=3のように変わり、そのページに該当する10件の社員データが表示されます。
カスタマイズできる内容
index.phpでは1ページに表示する件数や「社員一覧」の表示内容を変更できます。data.csvでは社員番号、氏名、部署、役職、出身地のデータを編集できます。データを追加・削除すると、CSVの総件数をもとにPHPがページ数を自動で計算します。
style.cssでは全体の余白、テーブルの列幅、背景色、文字色、枠線、角丸、ページ番号の大きさ、ページ番号同士の間隔、現在ページの背景色などを変更できます。
数値調整
index.php
$per_page = 10;
1ページに表示する社員データの件数です。10を大きくすると1ページに表示する件数が増え、小さくすると表示件数が減ります。CSVの総件数に合わせて総ページ数も自動で変わります。
style.css
margin:40px auto;
全体エリアの上下余白です。40pxを大きくすると上下の間隔が広がり、小さくすると狭くなります。
padding:24px;
全体エリアの内側余白です。値を大きくすると内容と画面端との間隔が広がり、小さくすると狭くなります。
font-size:28px;
「社員一覧」の文字サイズです。値を大きくすると見出しが大きくなり、小さくすると小さくなります。
min-width:760px;
社員一覧テーブルの最小横幅です。値を大きくするとテーブルが横に広がり、小さくするとコンパクトになります。画面幅に収まらない場合は横スクロールで表示されます。
width:110px;、width:180px;、width:120px;、width:170px;
社員番号・氏名・部署・役職・出身地の各列幅です。それぞれの値を変更すると対応する列の横幅が変わります。
padding:14px 16px;
テーブルセルの内側余白です。上下の14pxを大きくすると行が高くなり、左右の16pxを大きくすると文字とセル端の間隔が広がります。
border-radius:18px;
テーブルを囲むエリアの角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
gap:8px;
ページ番号同士の間隔です。値を大きくするとページ番号の間隔が広がり、小さくすると狭くなります。
min-width:42px;、height:42px;
ページ番号の最小横幅と高さです。値を大きくするとページ番号が大きくなり、小さくするとコンパクトになります。
border-radius:10px;
ページ番号の角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%により全体エリアを画面幅に合わせて表示します。社員一覧テーブルにはmin-width:760px、テーブルを囲むエリアにはoverflow-x:autoを設定しているため、テーブルが画面幅に収まらない場合は横方向へスクロールして確認できます。
画面幅600px以下では、全体エリアのmarginを24px、paddingを16px、「社員一覧」の文字サイズを24pxへ変更します。スマートフォン・タブレット・PCの画面幅に合わせて利用できます。
コメント