pagination.jsで絞り込み検索を検証。

投稿日：2022年2月14日

先日、紹介したpagination.js
簡易的ではありますが、絞り込み検索を実装してみました。

▼今回、作ったものです。

動作など見た通りなので説明は省きます。
以下ソースコードです。

index.html

index.js

▲10行目のEvent、afterPageOnClickの書き方が要になります。
Pagination.js Documentation をご参照ください。

style.css

まとめ

コンテンツ内の数字をなかなか取得できず、しばらく放置してしまいましたが、なんとか出来ました。
ただ、絞り込まれた状態はボタンを押したときだけなので、絞り込まれた状態をどこに持たせるかまだ考えていません。
例えば、他のページから絞り込み条件を保持した状態で遷移。
その結果を反映させるようなプログラムがかけたらいいなぁ。と思っています。
現時点では、URLパラメーターに持たせようとしましたが動作しません。
今後の課題とします。

最後まで読んでくださりありがとうございました。