CSVデータをAjaxで切り替えるページネーションを作る方法
CSVデータをAjaxで切り替えるページネーションを作る方法を紹介します。このサンプルでは、100件の社員データを保存したCSVファイルをPHPで読み込み、1ページにつき10件ずつテーブルへ表示します。ページ番号をクリックするとAjaxでPHPへリクエストを送り、ページ全体を再読み込みせずに該当する社員データだけを取得して一覧を切り替えます。
社員一覧、顧客一覧、商品一覧、管理画面のデータ一覧など、CSVで管理している多くのデータを複数ページへ分割して表示したい場合に利用できます。通常のリンクによるページ遷移とは異なり、Ajaxを使用して必要なデータだけを取得するため、ページ番号をクリックしても画面全体を読み込み直さず、そのままテーブルの内容を切り替えられます。
サンプルでは社員番号、氏名、部署、役職、出身地の5項目を持つ100件のCSVデータを使用し、10件ずつ全10ページに分けて表示します。CSVの内容を変更することで表示するデータを差し替えられ、PHPでは1ページあたりの表示件数、CSSではテーブルやページネーションの余白、色、サイズ、角丸などを調整できます。CSVとPHPを組み合わせた一覧表示にAjaxによるページ切り替えを追加したい場合に利用しやすいサンプルです。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
| 社員番号 | 氏名 | 部署 | 役職 | 出身地 |
|---|
1〜10のページ番号をクリックして、ページ全体を再読み込みせずに社員一覧が10件ずつ切り替わる動作を確認してください。
コードをコピーして使おう！
<?php
// Ajaxからページ番号が送信された場合
if(isset($_GET['ajax'])){
// JSON形式で返すことを指定
header('Content-Type: application/json; charset=UTF-8');
// CSVファイル名
$csv_file = 'data.csv';
// 1ページに表示する件数
// 10を変更すると、1ページに表示する社員データの件数が変わる
$per_page = 10;
// Ajaxから受け取ったページ番号
// 1未満にならないように調整
$page = max(1, (int)($_GET['page'] ?? 1));
// CSVから読み込んだ社員データを保存する配列
$rows = [];
// CSVファイルを読み込みモードで開く
if(($handle = fopen($csv_file, 'r')) !== false){
// 1行目の見出しを読み飛ばす
fgetcsv($handle);
// CSVを1行ずつ読み込む
while(($data = fgetcsv($handle)) !== false){
// 読み込んだ社員データを配列へ追加
$rows[] = $data;
}
// CSVファイルを閉じる
fclose($handle);
}
// CSVデータの総件数
$total_items = count($rows);
// 総ページ数
// 1ページ10件の場合、100件なら10ページになる
$total_pages = max(1, (int)ceil($total_items / $per_page));
// 総ページ数を超えるページ番号が指定された場合は最後のページにする
$page = min($page, $total_pages);
// 表示開始位置
$offset = ($page - 1) * $per_page;
// 現在のページに表示するデータだけを取得
$page_rows = array_slice($rows, $offset, $per_page);
// JavaScriptへ返すデータ
echo json_encode(
[
'page' => $page,
'totalPages' => $total_pages,
'rows' => $page_rows
],
JSON_UNESCAPED_UNICODE
);
// Ajaxレスポンスだけを返して処理を終了
exit;
}
?>
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- 文字コード -->
<meta charset="UTF-8">
<!-- スマートフォン対応 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- ページタイトル -->
<title>Ajax CSVページネーション</title>
<!-- CSSファイル -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- 社員一覧全体 -->
<div class="ajax-csv-pagination_wrap">
<!-- 一覧タイトル -->
<div class="ajax-csv-pagination_title">
社員一覧
</div>
<!-- 横幅が狭い画面ではテーブル部分を横スクロールできる -->
<div class="ajax-csv-pagination_table-wrap">
<!-- 社員一覧テーブル -->
<table class="ajax-csv-pagination_table">
<!-- テーブル見出し -->
<thead>
<tr>
<th>社員番号</th>
<th>氏名</th>
<th>部署</th>
<th>役職</th>
<th>出身地</th>
</tr>
</thead>
<!-- Ajaxで取得した社員データをここへ表示 -->
<tbody id="ajax-csv-pagination_body"></tbody>
</table>
</div>
<!-- Ajaxでページ番号をここへ作成 -->
<nav
id="ajax-csv-pagination_nav"
class="ajax-csv-pagination_nav"
aria-label="ページネーション">
</nav>
</div>
<!-- Ajax処理を行うJavaScriptファイル -->
<script src="script.js"></script>
</body>
</html>
コードをコピーする場合 使用するコードのタブを選び、「このタブをコピー」をクリックすると、現在表示中のコードをコピーできます。 サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
Q ダウンロードしたけど、これをネット上で動かすにはどうするの？
Googleアカウントがあれば、InfinityFreeで無料サーバーを作成して、ダウンロードしたサンプルをネット上で動かせます。
InfinityFreeを初めて利用する場合は①から、すでにサーバーを作成している場合は②へ進んでください。
ファイル構成と設置方法
このサンプルはPHP、CSS、JavaScript、CSVの4ファイルで構成されています。data.csvには100件の社員データを保存し、index.phpが指定されたページに必要な10件だけをCSVから取り出してJSON形式で返します。script.jsではAjaxを使用してindex.phpからデータを取得し、ページ全体を再読み込みせずに社員一覧とページネーションを切り替えます。
sample/
├── index.php
├── style.css
├── script.js
└── data.csv
各ファイルの役割
index.phpはページ本体のHTMLとAjaxリクエストの処理を行うファイルです。data.csvを読み込み、指定されたページに表示する社員データを10件ずつ取り出してJavaScriptへ返します。
style.cssは社員一覧テーブルとページネーションのデザインを設定するファイルです。余白、文字サイズ、列幅、背景色、枠線、角丸、ページ番号のサイズなどを変更できます。
script.jsはAjaxによるページ切り替えを行うファイルです。ページ番号をクリックするとindex.phpへリクエストを送り、取得した社員データだけをテーブルへ表示します。
data.csvは社員データを保存するCSVファイルです。1行目を「社員番号、氏名、部署、役職、出身地」の見出しとして使用し、2行目以降へ社員データを保存します。
設置方法・使い方
sampleフォルダへindex.php、style.css、script.js、data.csvを配置し、sampleフォルダごとPHPが動作するサーバーへアップロードしてください。ブラウザからsample/index.phpへアクセスすると1ページ目の社員データ10件が表示されます。1〜10のページ番号をクリックするとAjaxで該当ページのデータを取得し、ページ全体を再読み込みせずに社員一覧だけが切り替わります。
PHPを動かす無料サーバーを準備する場合は、InfinityFreeで無料サーバーを作る方法を参考にしてください。sampleフォルダ内のファイルをサーバーへアップロードする方法は、InfinityFreeのFile Managerの使い方で確認できます。
カスタマイズできる内容
data.csvを編集すると、社員番号、氏名、部署、役職、出身地など一覧へ表示するデータを変更できます。index.phpの$per_page = 10;を変更すると、1ページに表示する件数を調整できます。総ページ数はCSVのデータ件数と1ページあたりの表示件数から自動で計算されます。
style.cssでは社員一覧全体の余白、タイトルの文字サイズ、テーブルの列幅、セルの余白、背景色、枠線、角丸、ページ番号の大きさや色を変更できます。script.jsではページ番号をクリックしたときにAjaxでデータを取得し、テーブルとページネーションを更新しています。
数値調整
index.php
$per_page = 10;
1ページに表示する社員データの件数です。10を大きくすると1ページの表示件数が増えて総ページ数が少なくなり、小さくすると表示件数が減って総ページ数が多くなります。
style.css
padding:24px;
社員一覧全体の内側余白です。値を大きくすると内容と外側の間隔が広がり、小さくすると狭くなります。
font-size:28px;
「社員一覧」タイトルの文字サイズです。値を大きくするとタイトルが大きくなり、小さくすると控えめになります。
min-width:760px;
社員一覧テーブルの最小横幅です。値を大きくするとテーブルが横に広がり、小さくするとコンパクトになります。
border-radius:18px;
テーブル全体を囲む部分の角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
padding:14px 16px;
テーブルセルの内側余白です。上下の14pxを大きくすると各行が高くなり、左右の16pxを大きくすると文字とセル端の間隔が広がります。
gap:8px;
ページ番号同士の間隔です。値を大きくするとページ番号の間隔が広がり、小さくすると近くなります。
margin-top:24px;
テーブルとページネーションの間隔です。値を大きくすると上下の間隔が広がり、小さくすると狭くなります。
min-width:42px;
ページ番号の最小横幅です。値を大きくするとページ番号のボタンが横に広がります。
height:42px;
ページ番号の高さです。値を大きくするとページ番号のボタンが高くなります。
border-radius:10px;
ページ番号の角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%で社員一覧全体を画面幅に合わせ、テーブルにはmin-width:760px;を指定しています。画面幅がテーブルより狭い場合はoverflow-x:auto;によってテーブル部分だけを横スクロールできます。また、600px以下では社員一覧全体の余白を18px、タイトルの文字サイズを24pxへ変更するため、スマートフォン・タブレット・PCで利用できます。
コメント