CSV検索フォーム付きページネーションを作る方法
CSV検索フォーム付きページネーションを作る方法を紹介します。CSVファイルに保存した社員データをPHPで読み込み、検索フォームからキーワード検索を行い、一致したデータだけをページネーション付きで一覧表示するサンプルです。検索結果が多い場合でも、1ページごとに見やすく整理しながら表示できます。
このサンプルでは、氏名・部署・役職・出身地などのCSVデータを対象に検索を行い、検索条件に一致したデータだけを抽出します。その後、検索結果を1ページ10件ずつ表示するため、検索件数が多くなっても見やすい一覧画面を維持できます。また、ページ移動後も検索条件を引き継ぐため、再検索することなく結果を確認できます。
社員管理、顧客管理、商品一覧など、CSVで管理しているデータを検索しながら閲覧したい場面におすすめです。CSVだけで検索機能とページネーションを実装できるため、データベースを使用しないシンプルな管理ツールや社内システムにも導入しやすく、検索対象や表示件数はコード内で自由にカスタマイズできます。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
社員一覧
100件中 1〜10件を表示
| 社員番号 | 氏名 | 部署 | 役職 | 出身地 |
|---|
コードをコピーして使おう！
<?php
// CSVファイル名
$csv_file = 'data.csv';
// 1ページに表示する件数
$per_page = 10;
// 検索キーワードを取得
$keyword = isset($_GET['keyword']) ? trim($_GET['keyword']) : '';
// 現在のページ番号を取得
$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) {
// 検索キーワードが空の場合は全件追加
if ($keyword === '') {
$employees[] = $row;
continue;
}
// 1行分のデータを文字列にまとめる
$search_text = implode(' ', $row);
// キーワードを含む行だけ追加
if (mb_stripos($search_text, $keyword, 0, 'UTF-8') !== false) {
$employees[] = $row;
}
}
// CSVファイルを閉じる
fclose($handle);
}
// 総件数
$total_count = count($employees);
// 総ページ数
$total_pages = (int)ceil($total_count / $per_page);
// データがない場合でもページ番号を1にする
if ($total_pages < 1) {
$total_pages = 1;
}
// 現在ページが総ページ数を超えた場合は最後のページへ戻す
if ($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-search_wrap">
<h1 class="csv-pagination-search_title">社員一覧</h1>
<form class="csv-pagination-search_form" method="get">
<input
class="csv-pagination-search_input"
type="search"
name="keyword"
value="<?= htmlspecialchars($keyword, ENT_QUOTES, 'UTF-8') ?>"
placeholder="氏名・部署・役職・出身地で検索"
>
<button class="csv-pagination-search_button" type="submit">検索</button>
</form>
<p class="csv-pagination-search_count">
<?= $total_count ?>件のデータが見つかりました
</p>
<div class="csv-pagination-search_table-wrap">
<table class="csv-pagination-search_table">
<thead>
<tr>
<th>社員番号</th>
<th>氏名</th>
<th>部署</th>
<th>役職</th>
<th>出身地</th>
</tr>
</thead>
<tbody>
<?php if (count($page_employees) > 0): ?>
<?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; ?>
<?php else: ?>
<tr>
<td class="csv-pagination-search_empty" colspan="5">該当するデータがありません</td>
</tr>
<?php endif; ?>
</tbody>
</table>
</div>
<nav class="csv-pagination-search_nav" aria-label="ページネーション">
<?php for ($i = 1; $i <= $total_pages; $i++): ?>
<?php if ($i === $page): ?>
<span class="csv-pagination-search_current"><?= $i ?></span>
<?php else: ?>
<a href="?keyword=<?= urlencode($keyword) ?>&page=<?= $i ?>"><?= $i ?></a>
<?php endif; ?>
<?php endfor; ?>
</nav>
</div>
</body>
</html>ファイル構成と設置方法
このサンプルで使用するファイル構成です。
下記のファイルを同じフォルダ（同じ階層）へ配置してください。
sample/
├─ index.php
└─ data.csv
index.php にPHPコードを保存し、data.csv に検索対象データを保存してください。
サーバーへ設置する場合は、上記ファイルを同じフォルダ（同じ階層）へアップロードしてください。別フォルダへ配置する場合は、コード内の設定変更が必要になる場合があります。
PHPはサーバー上で実行されるため、PHPファイルをダブルクリックしても動作しません。動作確認はレンタルサーバーへアップロードするか、PHPが利用できるローカル環境で行ってください。
コメント