ページネーション2 | リンギルミュージック

前記に引き続きページネーションの作成です。

PHP側の実装

//値の取り出し
$ary = getPagination($BGM_ARRAY, 'bgm', 10);
$pagination = $ary['pagination']; 
$quality = $ary['quality'];
$audioAry = $ary['audioAry'];

$audioAryは音声ファイルの一覧作成の際に利用しますが、HTMLタグを生成するだけなのでここでは省略します。

HTML側の実装

<!-- ページネーション -->
<nav class="nav-pagination" aria-label="Page navigation">
    <ul class="pagination">
        <?= $pagination ?>
    </ul>
</nav>

PHPで生成したli要素をulの子要素として挿入します。

次にselect要素について、

<!-- 音質の選択 -->
<select id="select" class="form-control">
    <option value="all" <?= $quality == 'all' ? 'selected' : '' ?>>すべて</option>
    <option value="good" <?= $quality == 'good' ? 'selected' : '' ?>>良音質</option>
    <option value="midi" <?= $quality == 'midi' ? 'selected' : '' ?>>Midi</option>
</select>

PHPから取得した$qualityの値によって、selected属性を付与します。

Javascript側の実装

select要素のイベントについて、

$('#select').on('change', function() {
    var val = $(this).val();

    //ページ遷移
    window.location.href = '/bgm.php?page=1&quality=' + val;
});		

該当する音質のみ一覧に表示するために、クエリにselect要素の値を代入してページを遷移させます。

CSS側の実装

/* 中央寄せ */
.nav-pagination {
    text-align: center;
}

/* カーソル表示の変更 */
.pagination > .disabled > span,
.pagination > .disabled > span:hover,
.pagination > .disabled > span:focus {
    cursor: auto;
} 

デフォルトでは左寄せなので中央寄せにしています。またdisabledクラスの要素をホバーした際のカーソル表示を、ページネーションの要素については通常の表示に戻しています。

追記 8/30

サイトの改装により下記の実装で、select要素をbootstrap3のドロップダウンメニューにし、音質選択をジャンル選択に変更しました。

Bootstrap3によるドロップダウンメニューをPHPで実装

URL: ringil-music.com
使用言語: PHP 7.1.19
ライブラリ: Bootstrap 3・JQuery 1.12.4

コメントを残す

メールアドレスが公開されることはありません。