ホームページ > ウェブフロントエンド > jsチュートリアル > ejs テンプレート エンジンのページネーション CDN セットアップ ガイド。

ejs テンプレート エンジンのページネーション CDN セットアップ ガイド。

王林
リリース: 2024-09-10 11:02:25
オリジナル
1058 人が閲覧しました

Pagination CDN setup guide for ejs template engine.

ejs テンプレート エンジンでページネーションを実装するには、次の手順に従います。

ステップ 1: ページネーション CDN を含める
EJS ファイルの最後に次のスクリプトを追加します:

<script src="https://cdn.jsdelivr.net/gh/SujithVSuresh/pagination-cdn@master/pagination.js"></script>
ログイン後にコピー

ステップ 2: テンプレートにページネーション コントロールを追加する
ページネーション ボタンを表示する場所に次のコードを追加します:

          <div class="d-flex justify-content-center">
            <nav aria-label="Page navigation example">
              <ul class="pagination">
                <li class="page-item" id="prevBtn"><a class="page-link text-black" href="#">Previous</a></li>
                <% for(let i=1; i<= totalPages; i++){ %>
                <li class="page-item pagenationBtn" data-page-no="<%= i %>"><a class="page-link text-black"><%= i %></a></li>
                <% } %>
                <li class="page-item" total-pages="<%= totalPages %>" id="nxtBtn"><a class="page-link text-black" href="#">Next</a></li>
              </ul>
            </nav>
          </div>
ログイン後にコピー

上記のコードは、ページネーション用のインターフェイスを提供します。アプリケーションの設計に従ってコンテンツを適切に配置し、スタイルを設定してください。

ステップ 3:nodejs 用の paginationx npm パッケージをインストールしてセットアップします。このガイドに従ってください

以上がejs テンプレート エンジンのページネーション CDN セットアップ ガイド。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:dev.to
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート