Closed4
ページネーション設計について
まさぴょんページネーション設計
- 1ページの表示数上限を設定して切り分けるページネーション
- 無限スクロール
まさぴょんVue でのページネーション
まさぴょんlimit(上限値) と page(ページ番号)でのページネーション
ページネーションにおいて、limit と page 番号を使う実装方法は、データをページ単位で分割して表示する際に一般的に用いられます。
以下はその基本的なステップです。
- limit（表示件数）の設定：この値は1ページに表示したいアイテムの数を定義します。
- 例えば、limit=10 は1ページに10件のアイテムを表示することを意味します。
- page番号の使用：ユーザーがアクセスするページ番号です。
- 例えば、page=2 はユーザーが2ページ目を見ていることを示します。
- offsetの計算：これは表示を開始するアイテムのインデックスを計算するために使われます。
- 通常、offset = (page - 1) * limit の式で計算されます。
- たとえば、limit=10 と page=3 の場合、offset = (3-1) * 10 = 20 となり、21番目のアイテムから表示を開始します。
- SQLクエリの作成：データベースからデータを取得するために、計算された limit と offset をSQLクエリに含めます。
- 例：SELECT * FROM table LIMIT 10 OFFSET 20。
上記のの方法は、特に大量のデータがある場合にページネーションを効率的に行うのに役立ちます。
しかし、非常に多くのデータがある場合、特に高い page 番号でのパフォーマンスの問題に注意が必要です。
まさぴょんアイテム総数 ( all_count) と 1ページの表示アイテム数 (limit) から、page の数を計算する計算式は？
- 総アイテム数 (all_count) を 1ページあたりのアイテム数 (limit) で割ります。
- 割った結果の小数点部分がある場合は、切り上げる。
- 最後のページには他のページより少ないアイテムが表示される可能性があるため。
const allCount = 36
const itemLimit = 5
const pageInt = Math.ceil(allCount / itemLimit)
console.log('page: ', pageInt) // page: 8
このスクラップは4ヶ月前にクローズされました