1: フロントエンドの手書きページング(データ量が少ない場合)フロントエンドではスライスインターセプションを使用する必要があります: tableData((page-1)pageSize,pagepageSize) 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">«</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">»</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() } }, } }) } 要約するこの記事はこれで終わりです。皆さんのお役に立てれば幸いです。また、123WORDPRESS.COM のその他のコンテンツにも注目していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: サーバーから返される14の一般的なHTTPステータスコードの詳細な説明
>>: MySQL マルチバージョン同時実行制御 MVCC の実装
Dockerのインストール1. 要件: Linuxカーネルバージョン3.10以上 表示: uname...
この記事では、mysql8.0.11クライアントがログインできない問題の解決策を紹介します。参考まで...
なぜこのような効果を実現するのでしょうか。実は、この効果もタイトルプロンプトから派生したものですが、...
開発の問題点開発プロセスでは、データベース フィールドが頻繁に変更されるため、RD 環境と QA 環...
目次序文1. 型2. インスタンス3. コンストラクター詳細: 4. 文字列要約する序文Javasc...
目次1. マップを初期化する2. マップポイント3. 位置決めを有効にする4. マップの変更を監視す...
html <div class="totop" v-show="...
この記事の例では、テーブルを動的に生成するjsの具体的なコードを参考までに共有しています。具体的な内...
CSS には 4 種類の配置方法があり、シナリオによって効果が異なります。ここでは、これら 4 種類...
Java 言語には多くのバージョンがあります。一般的に使用されている Java 8 に加えて、一部の...
目次イベントループブラウザ環境イベントループノード環境イベントループ6つのステージ(1)setTim...
この記事の例では、ページング効果表示を実現するためのミニプログラムの具体的なコードを参考までに共有し...
概要:ファイルシステム モジュールは、標準の POSIX ファイル I/O 操作セットをラップしたシ...
mysql 5.7.19 winx64のインストールチュートリアルは以下のように記録され、みんなと...
私のおすすめ複数のIEバージョンの共存のためのソリューション以前に IE6、IE7、IE8 の共存に...