JavaScriptページングコンポーネントの使い方の詳細な説明

JavaScriptページングコンポーネントの使い方の詳細な説明

ページネーションコンポーネントはWeb開発でよく使われるコンポーネントです。ページネーション機能を実装し、id jsPaginationを持つDOM要素にページネーション表示部分を完成させてください。要件は次のとおりです。

1. 最大 5 ページを連続して表示し、現在のページを中央に強調表示します (デモ 1 を参照)
2. 合計が0の場合、要素全体を非表示にします(デモ2を参照)
3. 合計 <= 5 の場合、すべてのページを表示し、「最初のページ」と「最後のページ」の要素を非表示にします (デモ 3 に示すように)
4. 現在のページが中央で 5 ページ未満の場合は、後ろ (前) に 5 ページを追加し、「最初のページ」(「最後のページ」) 要素を非表示にします (デモ 4 およびデモ 5 に示すように)。
5. 合計と現在値はどちらも正の整数で、1 <= 現在値 <= 合計値

上記の要件を満たすページング コンポーネントを実装するには、ネイティブ JS を使用します。以下の点に注意する必要がある

1: <li> タグを取得する場合、前の <li> タグと次の <li> タグの間にテキスト ノードがあるため、 nextSibling を 2 回使用する必要があります。

ページ = page.nextSibling.nextSibling;

2: 提供された<li>タグのinnerHTMLは''であり、そこにページ番号を追加する必要があります。要件の5つの状況に従って記述します。

3: 最初のページと最後のページの非表示状態に特に注意してください。 current-2<=1 の場合、最初のページを非表示にします。current+2.>=total の場合、最後のページを非表示にします。最初のページと最後のページを非表示にする必要があるのは、上記の demo1、demo3、demo4、demo5 の場合です。 (demo1 の最初と最後のページが非表示になっていることは見落とされがちです!)

html

<ul class="pagination" id="jsPagination">
    <li>ホーム</li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li>最後のページ</li>
</ul>

CS

。隠れる{
    表示: なし!重要;
}
.ページネーション{
    マージン: 0 自動;
    パディング: 0;
    リストスタイル: なし;
    テキスト配置: 中央;
}
.ページネーション li{
    表示: インラインブロック;
    幅: 30ピクセル;
    高さ: 30px;
    オーバーフロー: 非表示;
    行の高さ: 30px;
    マージン: 0 5px 0 0;
    フォントサイズ: 14px;
    テキスト配置: 中央;
    境界線: 1px実線 #00bc9b;
    色: #00bc9b;
    カーソル: ポインタ;
}
.ページネーション li.current,
.pagination li:hover{
    背景: #00bc9b;
    色: #ffffff;
}
.デモ{
    マージン: 10px 0;
    パディング: 10px;
    背景: #eeeeee;
    テキスト配置: 中央;
}

JavaScript

関数ページネーション(合計、現在) {
        var ele = document.getElementById('jsPagination');
        //デモ1用
        if(現在-2>=1&¤t+2<=合計)
        {
            var page=ele.firstChild.nextSibling;
            (現在の2==1)の場合
                page.className='非表示';
            (変数 i=current-2,p=current-2;i<=current+2;p++,i++) の場合
            {
                ページ=page.nextSibling;
                console.log(ページ);
                ページ=page.nextSibling;
                console.log(ページ);
                ページ内HTMLをコピーします。
                if(i==現在)
                    page.className='現在の';
            }
            if(現在+2==合計)
            {
                var last = page.nextSibling.nextSibling;
                last.className='非表示';
            }
        }
        //デモ2用
        そうでない場合(合計==0)
        {
            ele.className='ページネーションを非表示';
        }
        //デモ3用
        そうでない場合(合計<=5)
        {
            var fir = ele.firstChild.nextSibling;
            fir.className='非表示';
            var page=fir;
            (変数 i=1;i<=5;i++) {
                ページ = page.nextSibling.nextSibling;
                (i <= 合計) の場合 {
                    ページ内HTMLをコピーします。
                    if(i==現在)
                        page.className='現在の';
                }
                それ以外
                {
                    page.className='非表示';
                }
 
            }
            var last = page.nextSibling.nextSibling;
            last.className='非表示';
        }
        //デモ4用
        そうでなければ(現在-2<=0)
        {
            var page=ele.firstChild.nextSibling;
            page.className='非表示';
            (変数 i=1;i<=5;i++) {
                ページ = page.nextSibling.nextSibling;
                ページ内HTMLをコピーします。
                    if(i==現在)
                        page.className='現在の';
            }
 
        }
        //デモ5用
        そうでない場合(現在+2>合計)
        {
            var page=ele.firstChild.nextSibling;
            for(var i=total-4;i<=total;i++) {
                ページ = page.nextSibling.nextSibling;
                ページ内HTMLをコピーします。
                if(i==現在)
                    page.className='現在の';
            }
            var last = page.nextSibling.nextSibling;
            last.className='非表示';
 
        }
}

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

以下もご興味があるかもしれません:
  • Vue.js ページング コンポーネントの実装: diVuePagination の使用方法の詳細な説明
  • Vuejs2.0は、$emitを使用してイベントをリッスンし、ページングコンポーネントでデータを送信する方法を実装しています。
  • AngularJS ディレクティブを使用してページングコンポーネントを実装する例
  • Reactjsはユニバーサルページングコンポーネントのサンプルコードを実装します
  • ネイティブjsはオブジェクト指向のページングコンポーネントを記述します
  • Vue.js はカスタムページングコンポーネント vue-paginaiton を実装します
  • vue.js を使用してページング コンポーネントを作成する
  • Vue.js ベースのテーブル ページング コンポーネント
  • js多機能ページングコンポーネントlayPageの使い方の詳しい説明
  • 自分で書いたシンプルなJavaScriptページングコンポーネントを共有します

<<:  MySQL 8.0.17 のインストールと使用方法のチュートリアル図

>>:  ウェブサイトの高速化における CDN、SCDN、DCDN の違いは何ですか?どうやって選ぶ?

推薦する

MySQLクエリツリー構造方式

目次MySQL クエリツリー構造1. ツリー構造について2. MySQLでカスタム関数を定義する方法...

MySQLウィンドウ関数の具体的な使用法

目次1. ウィンドウ関数とは何ですか? 1. ウィンドウをどのように理解しますか? 2. ウィンドウ...

CentOS のファイルと権限の基本操作チュートリアル

序文始める前に、ファイル属性とファイル属性を変更する方法について簡単に理解しておく必要があります。 ...

CSS 水平方向の中央揃えと最大幅の制限

CSS レイアウトとスタイルに関する質問: 水平方向の中央揃えと最大幅の制限のバランスをとる方法最近...

DockerはPruneコマンドを使用してnoneイメージをクリーンアップします

目次無イメージの創造と混乱Noneオブジェクトをクリーンアップする方法トリムミラーコンテナで使用され...

CSS3 は 3D キューブの読み込み効果を作成します

簡単な説明これは CSS3 のクールな 3D キューブのプリロード効果です。この特殊効果は、シンプル...

Nginx リバース プロキシを使用してクロスドメイン問題を解決する方法の詳細な説明

質問前回のクロスドメイン リソース共有に関する記事では、ドメイン間で Cookie を送信する場合、...

Meituan DBデータをデータウェアハウスに同期するアーキテクチャと実践

背景データ ウェアハウス モデリングでは、何ら処理されていない元のビジネス レイヤー データは OD...

Linux で環境変数 JAVA_HOME を変更/設定する方法について簡単に説明します。

1. 永久的な変更、すべてのユーザーに有効# vi /etc/プロファイル//キーボードの[Shi...

MySQL におけるデータベース間関連クエリメソッド

ビジネスシナリオ: 異なるデータベース内のテーブルをクエリするたとえば、関連付けられるテーブルは、マ...

MySQL 全文インデックスガイド

全文インデックスには特別なクエリ構文が必要です。全文検索はインデックスの有無にかかわらず実行できます...

CSS の vertical-align プロパティとベースラインの問題に関する深い理解

vertical-align属性は、主にインライン要素の配置を変更するために使用されます。インライン...

Ubuntu システムに Theano と Keras をインストールする方法

注: システムは Ubuntu 14.04LTS、32 ビット オペレーティング システムです。Py...

Vue フロントエンドで PDF を生成してダウンロードする方法

目次1. インストールと導入2. PDFファイルをパッケージ化してエクスポートする方法構成の詳細PD...

Ubuntu で G++ を使用して CPP ファイルをコンパイルする

g++ を使用して初めて cpp ファイルをコンパイルしたとき、未定義の参照エラーが報告されました。...