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 の違いは何ですか?どうやって選ぶ?

推薦する

CSS3は遷移を高速化し、遅延させる

1. 速度制御機能を使用して、トランジション効果(加速、減速など)の速度曲線を制御します。速度制御機...

フロントエンドセキュリティの詳細な説明: JavaScript の http ハイジャック対策と XSS

目次HTTP ハイジャック、DNS ハイジャック、XSS HTTPハイジャックDNSハイジャックXS...

PXEを使用してCentOS7.6を自動的にインストールする方法の詳細なチュートリアル

1. 需要ベースには 300 台の新しいサーバーがあり、CentOS7.6 オペレーティング システ...

JavaScript モバイル H5 画像生成ソリューションの説明

現在、WeChatパブリックアカウントの運用活動が多く、写真を生成する必要があります。生成された写真...

Vue コンポーネントはどのように解析され、レンダリングされるのでしょうか?

序文この記事では、Vue コンポーネントがどのように解析され、レンダリングされるかを説明します。 V...

Ubuntu でホームディレクトリを新しいパーティションに移行する詳細なチュートリアル

ユーザーのホーム ディレクトリがどんどん大きくなってきたら、ホーム ディレクトリを新しいパーティショ...

jsプロキシの原理の詳細な説明

目次プロキシモードとは何ですか?実例を紹介例を使ってプロキシモデルの定義を理解するプロキシとはget...

知らないかもしれない実用的なTypeScriptのヒント

目次序文関数のオーバーロードマッピングタイプ部分的、読み取り専用、Null 可能、必須選択、記録除外...

Vue ベースの Excel 解析とエクスポートの詳細な説明

目次序文基本的な紹介コードの実装基本構造アップロード分析Excel にエクスポート基本構造Excel...

Chromeの最小フォントサイズ制限12pxに対する最終的な解決策

ウェブサイトを作成するユーザーの多くが、このような問題に遭遇すると思います。Chrome のデフォル...

コードをセマンティックにする HTML のヒント

HTML のセマンティクスはありふれた問題のようです。Google で検索すると、セマンティクスに関...

MySQL ジョイントテーブルクエリの簡単な例

MySql は結合テーブルクエリを使用しますが、初心者には理解しにくい場合があります。以下の記事では...

CSS インライン スタイル、埋め込みスタイル、外部参照スタイルを使用する 3 つの方法

3 つの方法を使用する簡単な例は次のとおりです。インラインスタイル: <!doctypehtm...

携帯電話向けウェブページ作成のヒント

現在では多くの人がスマートフォンを使用していることを考慮すると、モバイル Web ページの書き方は、...

Unicode における CJK (中国語、日本語、韓国語の統合表意文字) 文字の概要

CJK は CJK Unified Ideographs の略称で、「中国語、日本語、韓国語の統一表...