javascript ページャー、検索フォーム

質問

javascriptについて質問です。

とある商品の一覧ページなのですが、現在JSONでデータを読み込み（JSONにそれぞれ商品名や金額のデータがあります）、「商品名」や「値段」などをdivタグに入れて1つの商品。それをfor文で回して数百の商品を一斉に表示している状態です。

この状態をにページャーを導入、具体的には商品を20ずつ表示し、「次のページヘ」のボタンを押すと21番めからの商品が現れるようにしたいのです。

また、検索フォームを付けたいのです。「金額」や「商品名」など複数の条件を入力するフォームがあり、「検索」ボタンを押すと、それらに適合する商品（ｄｉｖタグで包まれた、金額や商品名などのデータ）だけが、改めてページに表示されるようにしたいと考えています。

この2つの機能の実装方法がわからず困っております。現在手元にコードが無く、具体例を出せず申し訳ないのですが、分かる範囲でお教え頂ければ助かります。

宜しくお願い致します。

回答No.1

heburusu · ベストアンサー

jQueryのDataTableを使うと簡単かと思います。
参考URLにサンプルもありますので、そんなに難しくはないと思います。

参考URL：

https://datatables.net/examples/api/multi_filter.html