![見出し画像](https://assets.st-note.com/production/uploads/images/74816517/rectangle_large_type_2_52e635f59f478d4b882f66476feb82e0.png?width=1200)
WEB開発学習
昨日と今日でページネーションと既存登録編集ページを作成
ページネーション
ネットワークセグメントの登録ページの下段に現在登録中の一覧を表示できるように機能を実装
こんな感じです。
![](https://assets.st-note.com/img/1647950607604-Ru1sutCAjL.png?width=1200)
まだ一覧表示数を変更する機能を実装していないので固定で5件表示になってます。
青い5の右をクリックすると次の5件、左をクリックすると前の5件が表示されます。前の値がなかったり次の値がない場合は、クリックボタン自体がOFF状態になりクリックできないようにしてあります。
コードはこんな感じになります。
<ul class="pagination">
<?php if ($page>1): ?>
<li class="page-item">
<a class="page-link" href="?page=<?=$page-1?>">←Previous Page<?=$page-1?></a>
</li>
<?php else: ?>
<li class="page-item disabled">
<span class="page-link">No Previous Page</span>
</li>
<?php endif; ?>
<li class="page-item active" aria-current="page">
<span class="page-link"><?=$no_of_disp?></span>
</li>
<!--
<li class="page-item"><a class="page-link" href="#">20</a></li>
-->
<?php if ($page<$max_page): ?>
<li class="page-item">
<a class="page-link" href="?page=<?=$page+1?>">Next Page<?=$page+1?>→</a>
</li>
<?php else: ?>
<li class="page-item disabled">
<span class="page-link">Next No Page</span>
</li>
<?php endif; ?>
</ul>
先頭部分でデータベースの登録件数をカウントして戻ってきた値をもとにページの枚数を決定するようになっています。
$dbc = dbconnect();
$stmt = $dbc->prepare('SELECT * FROM `network_segment` LIMIT ?, ?' );
$no_of_disp = filter_input(INPUT_GET, 'no_of_disp', FILTER_SANITIZE_NUMBER_INT);
$no_of_disp = ($no_of_disp ?: 5);
// 登録件数確認
$dbc = dbconnect();
$stmt = $dbc->query('SELECT count(*) FROM `network_segment`');
$cnt = $stmt->fetch(PDO::FETCH_COLUMN);
$max_page = floor((intval($cnt)+1) / $no_of_disp + 1);
登録編集画面
登録ページの一覧表示の右端にある「編集」のボタンをクリックすると現在一覧表示している項目の編集画面に切り替わります。
![](https://assets.st-note.com/img/1647951388963-djw78i28XG.png?width=1200)
一覧表の表の左端の「編集」という青いボタンを下の編集項目に現在の設定値が出力されるのになっています。
![](https://assets.st-note.com/img/1647951471232-ODeTH6IPdm.png?width=1200)
参考にさせていただいたサイト
SQL取得結果からテーブルの生成
テーブルから値を取得する。
ご質問して頂いていた方とご回答して頂いた両方にとても感謝です。
次はこの状態で編集をクリックすることで現在の設定が書き変わるようにする処理を追加する形になります。
我ながら予想以上にいい感じにできているので嬉しい限りです。
プログラミングは楽しいですね。
以上、ありがとうございました。
この記事が気に入ったらサポートをしてみませんか?