この記事では、Vueのフロントエンドページングとバックエンドページングを実装する方法を説明します。

この記事では、Vueのフロントエンドページングとバックエンドページングを実装する方法を説明します。

1: フロントエンドの手書きページング(データ量が少ない場合)

フロントエンドではスライスインターセプションを使用する必要があります: tableData((page-1)pageSize,pagepageSize)

クリップボード.png

クリップボード1.png

2: バックエンドのページング、フロントエンドは渡されたページとページサイズのみに注意を払う必要があります

3: フロントエンドの手書きページングボタン

<本文>
  <div id="アプリ">
    <table class="table table-bordered table-condensed">
      <tr class="bg-primary">
        <th class="text-center">並べ替え</th>
        <th class="text-center">ユーザー名</th>
        <th class="text-center">ユーザーの性別</th>
        <th class="text-center">都市</th>
      </tr>
      <tr class="text-center active" v-for="(v,i) リスト内" :key="i">
        <td>{{num(i)}}</td>
        <!-- <td>{{params.pagesize}}</td> -->
        <td>{{v.name}}</td>
        <td>{{v.sex}}</td>
        <td>{{v.addr}}</td>
      </tr>       
    </テーブル>
    <nav aria-label="ページナビゲーション" style="text-align: center;">
      <ul class="ページネーション">
        <!-- 前のページ -->
        <li @click="prePage()" :class="{'disabled':params.page == 1}">
          <a aria-label="前へ">
            <span aria-hidden="true">&laquo;</span>
          </a>
        </li>
        <li :class="{'active': params.page == page}" v-for="(page,index) ページ内" :key="index" @click="curPage(page)">
          <a style="cursor: ポインター;">
            {{ページ}}
          </a>
        </li>
        <!-- 次のページ -->
        <li :class="{'disabled':params.page == totalPage}" @click="next()">
          <a aria-label="次へ">
            <span aria-hidden="true">&raquo;</span>
          </a>
        </li>
      </ul>
    </nav>
  </div>
</本文>
window.onload = 関数(){
  // 1秒間に1つのリクエスト(トリガーイベント)のみが許可されます(複数のクリックは許可されます)スロットル
  新しいVue({
    el: '#app',
    データ: {
      パラメータ:{
        ページ:1,
        ページサイズ:20,
        名前:''
      },
      リスト: [],
      total:0, //エントリの総数 totalPage:0, //ページの総数 flag: false,
    },
    作成された() {
      この.getData()
    },
    計算: {
      ページ() {
        totalPage を this.totalPage とします。
        page = this.params.page; とします。
        // ページの総数が 10 未満です if(totalPage < 10) return totalPage;
        // 総ページ数が 10 より大きい場合は省略記号を追加します if (page <= 5) { // 最初の 5 ページ // (1) ページ番号が 5 未満の場合は、左側に 6 ページが表示されます return [1,2,3,4,5,6,'...',totalPage]
        } else if (page >= totalPage - 5) { // 次の 5 ページ console.log("trigger")
          // (2) ページ番号が総ページ数 - 5 より大きい場合、右側に 6 つの戻り値が表示されます: [1,'...',totalPage-5,totalPage-4,totalPage-3,totalPage-2,totalPage-1,totalPage]
        } else { // 中央の 5 ページ // (3) ページ番号は 5-(totalPage-5) の間です。左の間隔は 5 未満にすることはできず、右の間隔はページ総数 totalPage より大きくすることはできません。左の現在のページ番号は 1 未満にすることはできず、右の現在のページ + 番号はページ総数より大きくすることはできません。 return [1,'...',page-1,page,page+1,page+2,page+3,'...',totalPage]
        }
      },
      数値() {
        {ページサイズ、ページ} = this.params
        // (1-1) * 10 + 10 + 0 + 1 = 1;
        // (2-1) * 10 + 10 + 0 + 1 = 11 
        // 最初のページ = (現在のページ - 1) * ページあたりのエントリ数 + インデックス値 + 1。1 から始まることを確認してください。 return i => (ページ - 1) * ページサイズ + i + 1 // (現在のページ - 1 * ページあたりのエントリ数) + インデックス値 + 1
      }
    },
    メソッド: {
      取得データ() {
        if(this.flag) 戻り値:
        this.flag = true;
        // 以下はタイマーと同等です axios.get('http://localhost:3000/user/listpage',{params:this.params}).then(res => {
          コンソールログ('res',res.data.users)
          合計ユーザー数を res.data.users とします。
          this.total = 合計;
          this.totalPage = Math.ceil( this.total / this.params.pagesize);
          this.list = ユーザー
          this.flag = false;
        })
      },
      curPage(ページ) {
        if(page == '...') 戻り値 
        if(this.flag) 戻り値:
        this.params.page = ページ;
        この.getData()
      },
      プレページ() {
        // if (this.params.page == '...') 戻り値 
        (this.params.page > 1)の場合{
          if(this.flag) 戻り値:
          --this.params.page;
          console.log('ページ',this.params.page)
          この.getData()
        }
      },
      次() {
        // if (this.params.page == '...') 戻り値 
        if(this.flag) 戻り値:
        console.log("実行", this.totalPage)
        this.params.page が this.totalPage より小さい場合、
          ++このパラメータページ;
          console.log('ページ',this.params.page)
          この.getData()
        }
      },
     } 
  })
}

画像.png

要約する

この記事はこれで終わりです。皆さんのお役に立てれば幸いです。また、123WORDPRESS.COM のその他のコンテンツにも注目していただければ幸いです。

以下もご興味があるかもしれません:
  • vue+Element-uiフロントエンドでページング効果を実現
  • Vueはフロントエンドページングの完全なコードを実装します
  • Vue.jsはブートストラップフロントエンドを組み合わせてページングとソート効果を実現します
  • フロントエンドとバックエンドの構成とVueページングプラグインの使用

<<:  サーバーから返される14の一般的なHTTPステータスコードの詳細な説明

>>:  MySQL マルチバージョン同時実行制御 MVCC の実装

推薦する

一般的なDockerコマンドの概要

Dockerのインストール1. 要件: Linuxカーネルバージョン3.10以上 表示: uname...

mysql8.0.11クライアントがログインできない問題の解決方法

この記事では、mysql8.0.11クライアントがログインできない問題の解決策を紹介します。参考まで...

CSS コンテンツ属性を使用して、マウスホバープロンプト (ツールチップ) 効果を実現します。

なぜこのような効果を実現するのでしょうか。実は、この効果もタイトルプロンプトから派生したものですが、...

自動同期テーブル構造のMySql開発

開発の問題点開発プロセスでは、データベース フィールドが頻繁に変更されるため、RD 環境と QA 環...

JS を使用してデータ型を決定する 4 つの方法

目次序文1. 型2. インスタンス3. コンストラクター詳細: 4. 文字列要約する序文Javasc...

React+Amapは緯度と経度をリアルタイムで取得し、住所を特定します

目次1. マップを初期化する2. マップポイント3. 位置決めを有効にする4. マップの変更を監視す...

jsは動的にテーブルを生成します(ノード操作)

この記事の例では、テーブルを動的に生成するjsの具体的なコードを参考までに共有しています。具体的な内...

CSS における位置指定の概要

CSS には 4 種類の配置方法があり、シナリオによって効果が異なります。ここでは、これら 4 種類...

Dockerを使用してシンプルなJava開発およびコンパイル環境を構築する方法の詳細な説明

Java 言語には多くのバージョンがあります。一般的に使用されている Java 8 に加えて、一部の...

ノードイベントループにおけるイベント実行の順序

目次イベントループブラウザ環境イベントループノード環境イベントループ6つのステージ(1)setTim...

ページング効果を実装するミニプログラム

この記事の例では、ページング効果表示を実現するためのミニプログラムの具体的なコードを参考までに共有し...

Node.js の fs モジュールと Path モジュールのメソッドの詳細な説明

概要:ファイルシステム モジュールは、標準の POSIX ファイル I/O 操作セットをラップしたシ...

mysql5.7.19 winx64 インストールおよび構成方法のグラフィック チュートリアル (win10)

mysql 5.7.19 winx64のインストールチュートリアルは以下のように記録され、みんなと...

Webスキル: 複数のIEバージョンの共存ソリューション IETester

私のおすすめ複数のIEバージョンの共存のためのソリューション以前に IE6、IE7、IE8 の共存に...