こんにちは!独学プログラマー&ライターのつぶらやです。
ページングってなんなの?
別名はページネーション
日本語では、ページ割だそうです。
よくWebページで見るページ番号、次へ、前へボタンなどがその機能です。
一覧表示で、沢山情報がある場合に分割して表示させる機能です。
なぜ分割させるのかといいますと、
・表示時間を短くさせる
・1ページの情報量を減らして見やすくさせる
などの効果があります。
ページングの概要がわかったところで次の疑問が浮かびませんか。
どうやって作られているのだろう。
本日はこのページングの作り方についてお話していきます。
ページングの仕組み
以下のようなデータがあったとします。
[su_table]
本種類 | 本の名前 |
ライトノベル | ライトノベルの本 |
歴史 | 歴史の本 |
料理 | 料理の本 |
啓発本 | 啓発の本 |
コミック | コミックの本 |
推理小説 | 推理小説の本 |
フォトブック | フォトブックの本 |
[/su_table]
そして、以下のようにページングを表示させてみました。
【図の説明】
①7件中3件ずつ表示されています。
②現在表示中のページで、リンクはついていません。
③2ページ目と3ページ目のリンクです。
次に、上記を作成するために必要なものを説明していきます。
1ページの記事の表示数
1ページに記事を何個表示するかという事です。
今回の場合、3となります。
トータルデータ件数
表示するデータが全部で何件あるのかという事です。
今回の場合は7件です。
トータルページ数
ページの数は何ページになるのかという事です。
今回の場合は、3ページです。
現在のページ番号
今表示しているページ番号は何ページ目になるのかという事です。
今回の場合は、1ページ目です。
最低限この4つがあればよいです。
この4つをどのように使用するのか説明します。
ページングで必要な事は、データの表示(図の①)とページへのリンク(図の②と③)作成です。
データの表示は、全データの何件目から何件目を取得すればよいかがわかればいいのです。
全データ7件(トータルデータ件数)で2ページ目を表示の場合、3件(記事の表示数)ずつ表示の2ページ目なので4件目~6件目のデータを取得するという事が分かるのです。
ページのリンクは、トータルページ数分作ればよいです。
図の例の場合全3ページなので、1、2、3とページのリンクが出来ます。
ただし、現在のページである1にはリンクは貼られていません。
ページングの仕組み、なんとなくわかって頂けたでしょうか。
ページングの基本編
それでは、基本編として実際のコードをサンプルで書いてみたいと思います。
前項目のデータ例を元にtest.phpを作成します。
<?php define('MAX','3'); // 1ページの記事の表示数 $books = array( // 表示データを配列に入れる array('book_kind' => 'ライトノベル', 'book_name' => 'ライトノベルの本'), array('book_kind' => '歴史', 'book_name' => '歴史の本'), array('book_kind' => '料理', 'book_name' => '料理の本'), array('book_kind' => '啓発本', 'book_name' => '啓発の本'), array('book_kind' => 'コミック', 'book_name' => 'コミックの本'), array('book_kind' => '推理小説', 'book_name' => '推理小説の本'), array('book_kind' => 'フォトブック', 'book_name' => 'フォトブックの本'), ); $books_num = count($books); // トータルデータ件数 $max_page = ceil($books_num / MAX); // トータルページ数※ceilは小数点を切り捨てる関数 if(!isset($_GET['page_id'])){ // $_GET['page_id'] はURLに渡された現在のページ数 $now = 1; // 設定されてない場合は1ページ目にする }else{ $now = $_GET['page_id']; } $start_no = ($now - 1) * MAX; // 配列の何番目から取得すればよいか // array_sliceは、配列の何番目($start_no)から何番目(MAX)まで切り取る関数 $disp_data = array_slice($books, $start_no, MAX, true); foreach($disp_data as $val){ // データ表示 echo $val['book_kind']. ' '.$val['book_name']. '<br />'; } for($i = 1; $i <= $max_page; $i++){ // 最大ページ数分リンクを作成 if ($i == $now) { // 現在表示中のページ数の場合はリンクを貼らない echo $now. ' '; } else { echo '<a href='/test.php?page_id='. $i. '')>'. $i. '</a>'. ' '; } } ?>
ポイントは現在のページを$_GET[‘page_id’]で取得する部分です。
/test.php?page_id=1
上記のようにURLに渡します。
そしてプログラム内では、$_GET[‘page_id’]で1という値を取得できます。
基本編は以上です。
ページングの応用編
応用として、次へ、前への表示と件数表示を行ってみます。
以下のようなイメージです。
①全データ数が表示されています。
②前へ、次へボタンが表示されています。
それでは前項で使用したtest.phpを修正していきます。
<?php define('MAX','3'); $books = array( array('book_kind' => 'ライトノベル', 'book_name' => 'ライトノベルの本'), array('book_kind' => '歴史', 'book_name' => '歴史の本'), array('book_kind' => '料理', 'book_name' => '料理の本'), array('book_kind' => '啓発本', 'book_name' => '啓発の本'), array('book_kind' => 'コミック', 'book_name' => 'コミックの本'), array('book_kind' => '推理小説', 'book_name' => '推理小説の本'), array('book_kind' => 'フォトブック', 'book_name' => 'フォトブックの本'), ); $books_num = count($books); $max_page = ceil($books_num / MAX); if(!isset($_GET['page_id'])){ $now = 1; }else{ $now = $_GET['page_id']; } $start_no = ($now - 1) * MAX; $disp_data = array_slice($books, $start_no, MAX, true); foreach($disp_data as $val){ echo $val['book_kind']. ' '.$val['book_name']. '<br />'; } echo '全件数'. $books_num. '件'. ' '; // 全データ数の表示です。 if($now > 1){ // リンクをつけるかの判定 echo '<a href='/paging.php?page_id='.($now - 1).'')>前へ</a>'. ' '; } else { echo '前へ'. ' '; } for($i = 1; $i <= $max_page; $i++){ if ($i == $now) { echo $now. ' '; } else { echo '<a href='/test.php?page_id='. $i. '')>'. $i. '</a>'. ' '; } } if($now < $max_page){ // リンクをつけるかの判定 echo '<a href='/paging.php?page_id='.($now + 1).'')>次へ</a>'. ' '; } else { echo '次へ'; } ?>
ポイントとしては次へや前へは、表示しているページによってリンクをつけるかの判定が必要になります。
前へを押して、1ページより前に移動することはできません。
応用編まで理解できたら、もうページングは怖くありませんね!
mysqlなどのデータベースでページング
最後にデータベースからのデータを使用する場合のページング方法についてお話しします。
今回はデータの配列を使用しましたが、mysql等のデータベースでsqlを発行してデータを取得する場合も考え方は同じです。
何件目からはoffsetを使用し、何件取ってくるかはlimitを使用します。
mysqlの接続方法は以下を参考にしてください。
まずは、データベースを使用しない方法でページングの基本をマスターしてからデータベースで取得に挑戦してみてください。
サンプルコードもデータ取得部分を変えれば使用できます。
まとめ
今回はページングについてお話ししました。
簡単なようで少し複雑。phpを学び始めた頃はよく混乱しました。
この記事が少しでも学習のお役に立てれば幸いです。
それでは、また。