CSVを使ったページネーションを作る方法【PHP/HTML/CSS・サンプルコード付き】

ページネーション
2026.07.01

CSVを使ったページネーションを作る方法

CSVを使ったページネーションを作る方法を紹介します。CSVファイルに保存した社員データをPHPで読み込み、一覧データを一定件数ごとに分割して表示するサンプルです。大量のデータを一度に表示せず、ページ番号をクリックして必要な範囲だけ確認できるため、社員一覧・顧客一覧・商品一覧などの管理画面に利用できます。

このサンプルでは、CSVに保存した100件の社員データを読み込み、1ページに10件ずつ表示します。PHPで現在のページ番号を取得し、表示開始位置を計算して、該当するデータだけを一覧に出力します。ページ番号もデータ件数に合わせて自動で生成されるため、CSVの件数が増えてもページ数を手書きする必要はありません。

デザイン部分はHTMLとCSSで作成しているため、表の色、余白、文字サイズ、ページ番号ボタンの見た目などを自由に変更できます。データベースを使わずにCSVだけでページネーションを作りたい場合や、まずはシンプルな一覧表示から実装したい場合に使いやすい構成です。

コードについて 本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。

デモ

社員一覧

社員番号 氏名 部署 役職 出身地
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);

?>
<!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_wrap">

    <!-- 見出し -->
    <h1 class="csv-pagination_title">社員一覧</h1>

    <!-- テーブル横スクロール用エリア -->
    <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_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_nav" aria-label="ページネーション">

      <?php for ($i = 1; $i <= $total_pages; $i++): ?>

        <?php if ($i === $page): ?>

          <!-- 現在のページ -->
          <span class="csv-pagination_current"><?= $i ?></span>

        <?php else: ?>

          <!-- ページリンク -->
          <a href="?page=<?= $i ?>"><?= $i ?></a>

        <?php endif; ?>

      <?php endfor; ?>

    </nav>

  </div>

</body>
</html>

ファイル構成と設置方法

このサンプルは、PHP・CSS・CSVの3ファイルで構成されています。PHPでCSVファイルを読み込み、社員データを1ページ20件ずつ表示するページネーションを実装しています。デザインはstyle.cssで管理し、表示するデータはdata.csvに保存します。 

sample/
├── index.php
├── style.css
└── data.csv

sampleフォルダごとPHPが利用できるサーバーへ設置してください。ブラウザでsample/index.phpへアクセスすると、CSVファイルから社員データを読み込み、ページネーション付きの一覧を表示できます。表示件数を変更したい場合はindex.phpの「$per_page」を変更してください。社員データを追加・編集する場合はdata.csvを編集するだけで一覧へ反映されます。

コメント