ページング効果を実現するNode+Express

ページング効果を実現するNode+Express

この記事では、ページング効果表示を実現するためのnode+expressの具体的なコードを参考までに共有します。具体的な内容は次のとおりです。

効果は以下のとおりです

1. インデックス

index.js内

//フロントエンドへのデータリスト送信 + ページング実装 router.get('/admin', function(req, res, next) {
     var カウント = 0;
    var ページ = 0;
    var サイズ = 5;
    //ページ番号 var pagenum = req.query.pagenum;
    var ページ番号 = ページ番号?ページ番号:1;
  mongo.connect(url1,function(err,database){
    database.collection("list",function(err,coll){ 
       //非同期処理 async.series([
      関数(コールバック){
       coll.find({}).toArray(function(err,data){
        count = data.length; //データ項目の数 //page = page<1? 1:page;
        page = Math.ceil(count/size); //ページの総数 pagenum = pagenum<1?1:pagenum; //ページ番号が1未満なので1を表示
        pagenum = pagenum>page?page:pagenum; //ページ番号が総ページ数より大きいため、総ページ数を表示します callback(null,'')
       })
       
      },関数(コールバック){
       
       coll.find().sort({_id:-1}).limit(size).skip((pagenum-1)*size).toArray(function(err,data){
           コールバック(null,データ)
       })
      }
     ],関数(エラー,データ){
             res.render('admin',{list:data[1],page:page,count:count,pagenum:pagenum,size:size,name:req.session.name})
             データベースを閉じる()
      
     })
      // coll.find({}).toArray(function(err,data){       
      // res.render('admin', {list:data}); //フロントエンドの管理ページは直接リストとして使用できます
      // データベースを閉じる()
      // })
    })
  })
});

2. レンダリングされたページ

<!-- データベースから取得したデータの表示 -->    
 
      <tbody id="tbody">
          <% list.map(function(item,i){ %>
              <tr>
                <td><%- i+1 %></td>
                <td><%- アイテム名 %></td>
                <td><%- item.nicheng %></td>
                <td><%- アイテム.time %></td>
                 <td><%- アイテム.pass %></td>
                 <td class="text-center">
                    <div class="layui-btn-group">
                    <button class="btn btn-primary btn-xs change" data-toggle="modal" data-target="#myModal2" dw-url="create.html?id=1" dw-title="ユーザーの編集">
                    <i class="layui-icon">&#xe642;</i>編集</button>
                    <button class="btn btn-danger btn-xs dw-delete delate" >
                        <i class="layui-icon">&#xe640;</i>削除</button>
                  </div>
                 </td>
                </tr>
                <tr>
                <% }) %> 
                      
             </tbody>
 
    <!-- ページング処理 -->
              <div class="am-cf">
                <li class="am-active" style="margin-top: 20px">
                     <span style="font-size:20px">ページ<%-pagenum%></span>
                </li>
               
               <div aria-label="ページナビゲーション" style="margin-left:600px">
                 <ul class="ページネーション">
                   <li class="am-disabled">
                     <a href="/admin?pagenum=<%-pagenum<1?1:parseInt(pagenum)-1 %>" >«</a>
                   </li>
                 
                 <% if(ページ>5){%>
                     <li class="am-active">
                     <a href="/admin?pagenum=1">1</a>
                   </li>
                   <li class="am-active">
                     <a href="/admin?pagenum=2">2</a>
                   </li>
                   <li class="am-active">
                     <a href="#" >...</a>
                   </li>
                   <li class="am-active">
                     <a href="/admin?pagenum=<%-page-1 %>"><%-page-1 %></a>
                   </li>
                   <li class="am-active">
                     <a href="/admin?pagenum=<%-page %>"><%-page %></a>
                   </li>
                   
                 
                 <% }その他{%>
                 
                   <% for(let i = 0;i<page;i++){ %> 
                     <li class="am-active">
                       
                       <a href="/admin?pagenum=<%-i+1 %>"><%-i+1 %></a>
                     </li>
                   <% } %> 
                 <% } %>
                 
                 
           <li>
           <a href="/admin?pagenum=<%-pagenum>ページ?page:parseInt(pagenum)+1%>" >»</a>
           </li>
           </ul>
       </div>
</div>>

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

以下もご興味があるかもしれません:
  • NodeJSとMySQLはページングデータとリバースデータを実装します
  • Vue+Nodeは、商品リストのページング、並べ替え、フィルタリングを実装し、ショッピングカート機能の追加について詳しく説明します。
  • NodeJs 操作 MongoDB チュートリアル ページング機能とよくある問題
  • Node.js の Bootstrap テーブルでページングを実装する 2 つの方法
  • Nodejs mysql ページング方法
  • Nodejs 個人ブログ開発ステップ 6 データ ページング
  • MongoDB に基づく Node.js 検索ページングの例
  • NodeJS と BootStrap ページング効果の実装コード
  • Nodejs ページングコード共有

<<:  Alibaba Cloud ECS クラウド サーバー (Linux システム) は、MySQL をインストールした後にリモートで接続できません (落とし穴)

>>:  MySQL Server 8.0.13.0 インストールチュートリアル(画像とテキスト付き)

推薦する

Nginx でアンチホットリンクを設定するための手順を完了する

必要:通常、サイト側は、ウェブサイト上の動画や写真が盗まれるのを防ぎたいと考えています。結局のところ...

Ubuntu 16.04 64 ビット版の VMware Tools のインストールと構成のグラフィック チュートリアル

この記事では、VMware Toolsのインストールと構成に関するグラフィックチュートリアルを参考と...

Vue で $props、$attrs、$listeners を使用する方法の詳細な説明

目次背景1. 文書の説明2. 特定の用途結論背景ここで、状況について説明しましょう。親コンポーネント...

Tomcat で静的リソースを処理するチュートリアル

序文Tomcat 内のすべてのリクエストは Servlet によって処理され、静的リソースも例外では...

mysql5.6.zip形式の圧縮版インストールグラフィックチュートリアル

はじめに: MySQL は、スウェーデンの MySQL AB によって開発されたリレーショナル デー...

MYSQL 演算子の概要

目次1. 算術演算子2. 比較演算子3. 論理演算子4. ビット演算子5. 演算子の優先順位1. 算...

Vue の v-model ディレクティブと .sync 修飾子の違いの詳細な説明

目次vモデル.sync微妙な違い機能シナリオを要約します。 vモデル <!--親コンポーネント...

Vueはシンプルなデータ双方向バインディングを実装します

この記事では、Vueの具体的なコード例を参考までに紹介します。具体的な内容は以下のとおりです。初心者...

jQuery エディタ プラグイン tinyMCE の使い方

簡略化されたファイル サイズを変更し、サンプルをダウンロードします。ファイルをローカル コンピュータ...

要素の属性を削除する JS removeAttribute() メソッド

JavaScript では、要素の removeAttribute() メソッドを使用して、指定され...

Vue は PDF ファイルのオンライン プレビューを実装します (pdf.js/iframe/embed を使用)

序文現在、私はコースウェア PPT のオンライン プレビューを必要とする高品質のコースに取り組んでい...

MySQL バイナリログデータ復旧: 誤ってデータベースを削除した場合の詳細な説明

MySQL Binログデータの回復: 誤ってデータベースを削除した場合前書き: テスト マシンで誤っ...

HTML の POST リクエストにおける a タグの 2 つの使用法の分析

HTML POST リクエストで a タグを使用する 2 つの例を次に示します。 1. ajaxを使...

vue3 のストアを使用してスクロール位置を記録する例

目次全体的な効果コンテナのスクロールイベントをリッスンするストア内の構成ページが戻るときのスクロール...

docker run後にコンテナがExited (0)と表示される問題を解決する

Centos7 上で openresty 用の Dockerfile を作成し、ビルドしました。 d...