シンプルなフロントエンドのページング効果を実現する js

比較的シンプルな業務のプロジェクトもありますが、フロントエンドのページングを多用します。プラグインのサイズ制御が難しく、使用が面倒なので、自分でシンプルなものを作成します。

実装のアイデア

jQuery.slice() を使用してサブセットの間隔要素を選択し、表示と非表示を制御します。
1 ページあたりに表示される項目数が x、現在のページ番号が y、要素インデックスが 0 から始まるとすると、表示される範囲は x(y-1) から xy になります。

効果のデモンストレーション

デモコード

<!DOCTYPE html>
<html lang="ja">

<ヘッド>
    <メタ文字セット="UTF-8">
    <meta http-equiv="X-UA-compatible" content="IE=edge">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <title>フロントエンド ページング実装デモ</title>
</head>

<本文>
    <div class="parent">
        <ul class="box" style="min-height: 147px;">

        </ul>
        <div class="ページボックス">
            <button class="page-btn prev">前のページ</button>
            <span class="page-num">1/1</span>
            <button class="page-btn next">次のページ</button>
        </div>
    </div>

    <div class="parent">
        <ul class="box2" style="min-height: 63px;">

        </ul>
        <div class="ページボックス">
            <button class="page-btn prev">前のページ</button>
            <span class="page-num">1/1</span>
            <button class="page-btn next">次のページ</button>
        </div>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <スクリプト>
        /**
         * ページングの初期化* @param {*}eleBox ページングするコンテナ* @param {*}size ページあたりのエントリ数*/
        関数InitPagination(eleBox, サイズ) {
            var ボックス = $(eleBox)、
                子 = box.children(),
                合計 = children.length、
                ページボックス = box.next(),
                ページ番号 = pageBox.find('.page-num'),
                maxNum = !Math.ceil(合計 / サイズ) ? 1 : Math.ceil(合計 / サイズ);

            ページ番号.text('1/' + 最大数);
            子要素を非表示にする
            children.slice(0, size).show();

            pageBox.off().on('click', '.prev, .next', 関数(e) {
                var nowNum = parseInt(pageNum.text().split('/')[0]);

                $(this).hasClass('prev') の場合 {
                    今の数--;
                    (nowNum < 1) の場合 {
                        現在数 = 1
                        戻る;
                    }
                } それ以外 {
                    今の数++;
                    (現在の数値 > 最大数値) の場合 {
                        現在数 = 最大数
                        戻る;
                    }
                }

                子要素を非表示にする
                children.slice(size * (nowNum - 1), nowNum * size).show();
                pageNum.text(nowNum + '/' + maxNum);
            })
        }
        // データ書き込みをシミュレートします var box = $('.box'), box2 = $('.box2'), li = '';
        (i = 0; i < 16; i++ とします) {
            li += '<li>' + i + '</li>'
        }
        ボックス.html(li);
            box2.html(li);

        // ページネーターをインスタンス化します new InitPagination(box, 7)
        新しいInitPagination(box2, 3)
    </スクリプト>
</本文>

</html>

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません: