[JavaScript] 表示数が固定のページネーションを作る

概要

常に表示されるページ数が固定なページネーションを作成するスクリプトサンプルです。

太文字が現在ページ数として、以下のような感じで表示されます。

1 2 3 4 5

6 7 8 9 10

またページネーションのリンクとして ?page=1 みたいな文字列を付与するのですが、検索クエリ付きだと ?q=xxx?page=1 みたいに残念なことになるのでそうならないように工夫してあります。

(paginationのnodeモジュールはあったのですが、この問題があったために自作したという経緯があります。)

サンプルコード

サンプルコード(Gist)

使用例

const pagination = require('./pagination');

// 全ての引数が optional です。
const html = pagination({
  link: '/posts/', // 基本となるリンク
  query: { q: 'ちぇん' }, // 検索文字列など (?q=xxx とか) 
  current: 3, // 現在のページ数
  perPage: 10, // 1ページあたりの件数
  total: 55, // 総件数,
  viewPageNum: 5 // ページネーションの表示数
});

console.log(html);

タグ: JavaScript
https://www.dragonforest.jp/posts/3
公開: 2019-06-25 02:31:11 | 更新: 2019-06-25 02:36:13

<< 戻る