PHPでデータベースから情報を取得し、javascriptでページネーションを実装
やりたいこと
以下のように、データベースから取得した情報を10件ずつ ページネーションする方法を紹介します。今回はjavascript編です。
PHP側とCSSについては 以下を参照。
参考
PHPでデータベースから情報を取得し、javascriptでページネーションを実装
#1 PHPの書き方
【HTML】【CSS】ページネーションデザイン(Pagination Design)
ニューモーフィズム(Neumorphism)でオシャレに
ファイル構成
フォルダの中には以下のファイルが存在します。
HTML
テーブル部分のHTML
PHPで受け取った値をテーブルに書き出します
<?php
require('./function.php');
list($pc) = Get10Data();
list($page) = page();
$totalPages = totalPages();
<!-- セキュリティのための関数 -->
function h($s){
return htmlspecialchars($s, ENT_QUOTES, "UTF-8");
}
?>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
</head>
<body>
<table>
<thead>
<tr>
<th>ID</th>
<th>title</th>
</tr>
</thead>
<tbody>
<?php foreach ($pc as $post):?> <!-- 受け取った10件のデータをループ -->
<tr>
<td><?php echo h($post['id'])?></td>
<td><?php echo h($post['title'])?></td>
</tr>
<?php endforeach; ?>
</tbody>
</table>ページネーション部分のHTML
ここにjavascriptでページネーションを生成します。
<div>
<ul class="pagenations-wrapper"></ul>
</div>javascriptでPHPの変数を受け取るために
javascriptでPHPの変数を受け取るために </body>の手前に 以下を記述しておきます。
<script>
let page = Number("<?php echo $page?>");
let totalPages = Number("<?php echo $totalPages?>");
</script>
<script src="./script.js"></script>
</body>
</html>ここまででindex.htmlを説明しました。
Javascript
最後にscript.jsについてです。
変数を宣言
// ページネーションを生成する要素を取得
const ul = document.querySelector(".pagenations-wrapper");
// 「戻るタグ」
let prevTag = `<li class="prev" onclick="createPagenation(totalPages, ${page - 1})">
<a href="?page=${page - 1}">Prev</a></li>`;
// 「次へタグ」
let nextTag = `<li class="next" onclick="createPagenation(totalPages, ${page + 1})">
<a href="?page=${page + 1}">Next</a></li>`;
// 1ページ目のリストタグ
let firstPage = `<li onclick="createPagenation(totalPages, 1)">
<a href="?page=1">1</a></li>`;
// 最後のページのリストタグ
let lastPage = `<li onclick="createPagenation(totalPages, ${totalPages})">
<a href="?page=${totalPages}">${totalPages}</a></li>`;ページネーションを生成させる関数
トータルページが6より少ない場合、「…」を表示させる必要がないので、以下の2つを条件分岐する必要がある。
19-31行目 : トータルページが6より少ない場合。
32-93行目 : トータルページが6以上の場合
function createPagenation(totalPages, page) {
let liTag = ""; // 条件にあった場合にHTMLを代入していきます
let beforePage = page - 1;
// 2ページ以降、Prev(戻る)タグを表示
if (page > 1) {
liTag += prevTag;
}
// 1ページ目のリストタグ
// 今開いているページが1ページ目ならアクティブ
if (page == 1) {
liTag += `<li onclick="createPagenation(totalPages, 1)" class="active">
<a href="?page=1">1</a></li>`;
} else {
liTag += firstPage;
}
// トータルのページが6ページより小さい場合
if (totalPages < 6) {
// 「トータルページ-1」と同じだけのリストを表示
for (let i = 2; i <= totalPages - 1; i++) {
if (i == page) {
// 今開いているページをアクティブに
liTag += `<li onclick="createPagenation(totalPages, ${i})" class="active">
<a href="?page=${i}">${i}</a></li>`;
} else {
liTag += `<li onclick="createPagenation(totalPages, ${i})">
<a href="?page=${i}">${i}</a></li>`;
}
}
} else {
// トータルページが6ページ以上の場合
if (page > 3) {
// 開いているページが3ページより大きい場合「...」を表示
liTag += `<li class="dots"><span>...</span></li>`;
}
// 今開いているページが1ページ目か、2ページ目の場合
if (page == 1 || page == 2) {
for (let i = 2; i < 4; i++) {
// 2つだけリストタグを表示
if (i == page) {
// 今開いているページをアクティブに
liTag += `<li onclick="createPagenation(totalPages, ${i})" class="active">
<a href="?page=${i}">${i}</a></li>`;
} else {
liTag += `<li onclick="createPagenation(totalPages, ${i})">
<a href="?page=${i}">${i}</a></li>`;
}
}
}
// 今開いているページが2ページ以上、トータルページ未満の場合
if (page > 2 && page < totalPages - 1) {
// 今開いているページが2ページより大きい場合
// 今開いているページを含むリストタグを3つ表示させる
for (let i = beforePage; i < beforePage + 3; i++) {
if (i == page) {
// 今開いているページをアクティブに
liTag += `<li onclick="createPagenation(totalPages, ${i})" class="active">
<a href="?page=${i}">${i}</a></li>`;
} else {
liTag += `<li onclick="createPagenation(totalPages, ${i})">
<a href="?page=${i}">${i}</a></li>`;
}
}
}
// 今開いているページがトータルページより2つより小さい場合「...」を表示
if (page < totalPages - 2) {
liTag += `<li class="dots">…</li>`;
}
// 今開いているページが最終ページ、またはそのひとつ前のページの場合
if (page == totalPages || page == totalPages - 1) {
// beforePageの調整
beforePage = page == totalPages ? beforePage - 1 : beforePage;
// リストタグを2つ表示
for (let i = beforePage; i < beforePage + 2; i++) {
if (i == page) {
// 今開いているページをアクティブに
liTag += `<li onclick="createPagenation(totalPages, ${i})" class="active">
<a href="?page=${i}">${i}</a></li>`;
} else {
liTag += `<li onclick="createPagenation(totalPages, ${i})">
<a href="?page=${i}">${i}</a></li>`;
}
}
}
}
// 今開いているページが最終ページならアクティブに
if (page == totalPages) {
liTag += `<li onclick="createPagenation(totalPages, ${totalPages})" class="active">
<a href="?page=${totalPages}">${totalPages}</a></li>`;
} else {
liTag += lastPage;
}
// 開いているページがトータルページ未満の場合、Next(次へ)タグを表示
if (page < totalPages) {
liTag += nextTag;
}
// 最後にすべてのHTMLを代入したliTagを返す
return liTag;
}ページネーション生成
ul.innerHTML = createPagenation(totalPages, page);
まとめ
- PHPでデータベースに接続、データを取得
- PHPで取得したデータをjavascriptに渡し、ページネーションさせる
こんな記事も読まれています。
-
【HTML】【CSS】【javascript】電卓の作り方
電卓のソースコードを２つ紹介します。javascriptはわずか数行で書けます。
-
【JacvaScript】【CSS】たった4行のJavaScriptでできるハンバーガーメニューの作り方
たった4行のJavaScriptで作るハンバーガーメニューの作り方について紹介します。✖をつくるには、transform-originがポイントです。
- リンク
-
波紋エフェクトを表現するjqueryのripples-min.jsの使い方
jqueryのripples-min.jsを使うと簡単に水面の波紋を表現できます。波紋の広がりの速度、波紋の大きさ、波紋のブレの値を変えていろいろ表現させると面白いです。
-
【Javascript】querySelectorAllで要素を取得し、クリックしたら、クラスを追加したり、削除したりする方法。
JavascriptのquerySelectorAllで要素を取得し、クリックしたら、クラスを追加したり、削除したりする方法について解説します。querySelectorと同じように書いてしまうとエラーがでます。forEachを使うとすべてに適用できます。
- リンク
-
要素の高さを取得する方法。getBoundingClientRectとは？window.innerHeightとは？window.pageYOffsetとは？
要素の高さを取得する方法について解説します。getBoundingClientRect、window.innerHeight、window.pageYOffsetについて理解し、要素がいつ画面に現れるかを把握できるようにしましょう。
-
Javascriptを使ったページネーションの実装
トップページの記事が増えてきたので、何とかページネーションで最新の記事だけを表示できないかと思っていたら、いい記事を発見しました。カスタマイズして実装することができました。
- リンク
-
【Javascript】マウスの指す(X, Y)座標とドラッグ & ドロップを理解する
マウスの指す(X, Y)座標とドラッグ & ドロップについて解説します。mousedown, mouseover, mousemove, mouseupを使います。
-
【javascript】連想配列をテーブルできれいに表示する方法
javascript（Object.entries）を使って、連想配列の中身をテーブルできれいに表示する方法について紹介します。
- リンク
