ページネーションのリンク表示について

Question

Node.jsでアプリを作成しており、ページネーション機能を実装しています。サーバー側ではクエリを指定することで10個ずつデータを表示するような処理にしてあります。（?skip=0で最初の10件、?skip=10で次の10件といった形）

画面下部に表示するページングのリンクについてなのですが、データの取得件数に応じて自動でリンクが作られるようにする実装について悩んでいます。

クライアント側のJavaScriptでデータ取得件数を10で割った商+1個分のli要素を作成、挿入していくというやり方を思いついたのですが、一般的なやり方なのかどうか分からなかったので、他にシンプルな方法があれば教えていただけたらと思い質問させていただきました。よろしくお願いします。

<nav aria-label="Page navigation example">
  <ul class="pagination">
    <li class="page-item"><a class="page-link" href="?skip=0">1</a></li>
    <li class="page-item"><a class="page-link" href="?skip=10">2</a></li>
    <li class="page-item"><a class="page-link" href="?skip=20">3</a></li>
 　　{{!-- li要素を取得データ件数に応じて作成する --}}
  </ul>
</nav>

Answer 1

10個ずつデータを表示するような処理

「データが1000個あるときは100ページになりますが、その場合、すべて表示させるのか？」
というような、エンドユーザが目にするインターフェースを考える必要があります。

シンプルな実装方法よりも、ユーザビリティの高い実装を目指すとなると、複雑になるページ計算をオブジェクト化するのが良いのではないでしょうか。

たとえば、上記の例のように 100 ページあるが、ボタンは最大15個までしか表示しないようにできるようにするなど。

---

まだ不十分ですが、似たような実装を考えていましたので共有します。
CODEPEN Pagenate （修正が必要と思いますので、ご自由にForkしちゃってください）