[Vue] ページネーション機能の作り方とコンポーネント作成入門 からの続き。
続きなので前の記事で作ったやつがないとできません！
引き続きCodeSandboxでやります。
ローカルに環境作った方はそちらでどうぞ。
CodeSandboxのプレビューのところに、Testsっていうタブがあるのに気づきました？
これ、テストを実行して結果を表示してくれる便利機能です。
今回はこの機能を使えるようにします！
【2019/10/21追記】CodeSandboxのバグでテスト機能が動きません
Pagination
[Vue.js] ページネーション機能の作り方とコンポーネント作成入門
[PHP] ページング機能の仕組みとか作り方とか が今年で10周年！
今はPHPを書くことはWordpressを魔改造するときくらいで、もっぱらJavasScriptを使う事が多いです。
2018年はずっとVue.jsと戯れていたので、Vueでpaginationコンポーネントはどうやって作れば良いの？という視点でまとめてみました。
環境構築は面倒くさいのでCodeSandbox使います！
なのでローカルにインストールからやってみたい方はVueの公式ドキュメント片手にトライしてどうぞ。
[PHP] ページング機能の仕組みとか作り方とか
ページング機能というのは、「複数に分かれたページの前後ページへ移動するためのナビゲーションリンク」のことで
このブログにも下の方に次のページへ移動させるためのページ番号リンクがありますよね。それです。
名称はページングだったりページネーションだったりしてますが、海外だとpaginationの方が一般的なようです。
先頭の何ページ目かまではページ番号、それ以上は三点リーダーとかでぼかしたりするGoogleライクなものや、
前後への矢印だけしか表示させなかったりするものなど、スタイルは色々ありますが
これが自作しようとすると結構面倒臭い。そしてプログラミング初心者だとまず仕組みが良く分からない。
結構よく使うのに作り方や仕組みの解説をあんまり見ない気がするので書いてみます。
１０周年記念にVue.js版を書きました！
[Vue] ページネーション機能の作り方とコンポーネント作成入門
2019/09/12 Vue版に合わせて全面的に書き換え＆動作サンプル追加しました