PHPでAjaxを使ったCSVページネーション機能を作る方法
PHPでAjaxを使ったCSVページネーション機能を作る方法を紹介します。Ajaxとは、ページを再読み込みせずにJavaScriptからサーバーへ通信する仕組みです。このサンプルでは、CSVファイルのデータを非同期で取得し、ページを切り替えながら一覧表示できます。大量データの一覧画面や管理画面、検索結果画面などを作成したい場合に利用できます。
コードについて
本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
Ajax CSVページネーション
| ID | テキスト |
|---|
コードをコピーして使おう！
<?php
// CSVファイル名です
$csv_file = 'data.csv';
// 1ページあたりの表示件数です
$per_page = 5;
// CSVデータを読み込む関数です
function load_csv_data($csv_file) {
$rows = [];
if (!file_exists($csv_file)) {
return $rows;
}
$fp = fopen($csv_file, 'r');
if ($fp) {
// 1行目の見出しを読み飛ばします
fgetcsv($fp);
while (($data = fgetcsv($fp)) !== false) {
if (count($data) >= 2) {
$rows[] = [
'id' => $data[0],
'text' => $data[1]
];
}
}
fclose($fp);
}
return $rows;
}
// Ajax通信でページ番号が送られた場合の処理です
if (
$_SERVER['REQUEST_METHOD'] === 'POST' &&
isset($_POST['page'])
) {
$page = (int)$_POST['page'];
if ($page < 1) {
$page = 1;
}
$rows = load_csv_data($csv_file);
$total_pages = (int)ceil(count($rows) / $per_page);
$start = ($page - 1) * $per_page;
$page_rows = array_slice($rows, $start, $per_page);
header('Content-Type: application/json; charset=UTF-8');
echo json_encode([
'rows' => $page_rows,
'total_pages' => $total_pages,
'current_page' => $page
], JSON_UNESCAPED_UNICODE);
exit;
}
?>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Ajax CSVページネーション</title>
<style>
body{
font-family:sans-serif;
background:#f8fafc;
margin:40px;
}
.php-ajax-csv-pagination_wrap{
max-width:700px;
margin:0 auto;
padding:24px;
border:1px solid #e5e7eb;
border-radius:18px;
background:#ffffff;
}
.php-ajax-csv-pagination_title{
font-size:22px;
font-weight:bold;
margin-bottom:20px;
}
.php-ajax-csv-pagination_table{
width:100%;
border-collapse:collapse;
}
.php-ajax-csv-pagination_table th,
.php-ajax-csv-pagination_table td{
border:1px solid #d1d5db;
padding:10px;
text-align:left;
}
.php-ajax-csv-pagination_table th{
background:#f1f5f9;
}
.php-ajax-csv-pagination_nav{
display:flex;
justify-content:center;
gap:8px;
margin-top:20px;
flex-wrap:wrap;
}
.php-ajax-csv-pagination_btn{
min-width:42px;
height:42px;
border:none;
border-radius:8px;
background:#0b6bff;
color:#ffffff;
cursor:pointer;
}
.php-ajax-csv-pagination_btn.active{
background:#16a34a;
}
</style>
</head>
<body>
<div class="php-ajax-csv-pagination_wrap">
<div class="php-ajax-csv-pagination_title">
Ajax CSVページネーション
</div>
<table class="php-ajax-csv-pagination_table">
<thead>
<tr>
<th>ID</th>
<th>テキスト</th>
</tr>
</thead>
<tbody id="dataBody"></tbody>
</table>
<div
id="paginationNav"
class="php-ajax-csv-pagination_nav"
></div>
</div>
<script>
// 指定したページのデータをAjaxで取得します
function loadPage(page){
fetch(location.href,{
method:'POST',
headers:{
'Content-Type':'application/x-www-form-urlencoded'
},
body:new URLSearchParams({
page:page
})
})
.then(response=>response.json())
.then(data=>{
const body=document.getElementById('dataBody');
const nav=document.getElementById('paginationNav');
body.innerHTML='';
nav.innerHTML='';
// 取得したCSVデータを表に表示します
data.rows.forEach(function(row){
body.insertAdjacentHTML(
'beforeend',
'<tr><td>' + row.id + '</td><td>' + row.text + '</td></tr>'
);
});
// ページ番号ボタンを作成します
for(let i=1;i<=data.total_pages;i++){
const button=document.createElement('button');
button.type='button';
button.className='php-ajax-csv-pagination_btn';
button.textContent=i;
if(i===data.current_page){
button.classList.add('active');
}
button.addEventListener('click',function(){
loadPage(i);
});
nav.appendChild(button);
}
});
}
// 初期表示で1ページ目を読み込みます
loadPage(1);
</script>
</body>
</html>
ファイル構成と設置方法
このサンプルでは、index.php と data.csv を同じフォルダに配置して使用します。CSVファイルの内容はAjax通信で取得され、ページを再読み込みせずにページネーションを切り替えられます。
sample/
├── index.php
└── data.csv
index.php と data.csv を同じフォルダへ配置し、ブラウザから index.php にアクセスしてください。ページ番号をクリックすると、Ajax通信によって該当ページのデータだけが取得され、画面全体を再読み込みせずに一覧が切り替わります。
コメント