Javaによ るWebシステム開発は、とにかく画面の再描画を行いまくるため、データの持ち回りを漏れがないように意識します。

beanに持たせてusebeanしたり、request.getParameterやAttributeだらけになってしまいます。

そこに動的に作成しているselectタグ部品があったりするとその都度作り直してやることになり、それ用のmethodを用意したり、たいへんです。

そこでjQueryを使ってjavascriptからpost送信し、その結果をdocument.getElementById(“なにがし”).innerText = 〜みたいな形で、あるいは、jQueryのloadを使ってservletが返してくる文字列(HTMLでも構わない)を特定のidの領域に表示してやる仕組みを作ることで、画面の再描画なしで、画面の一部を更新することが可能になります。

これと、jQueryのページネーションを組み合わせることで、検索結果が多い一覧の、検索結果のみを書き換えるような動きが可能になるはずです(理屈では)。

更にそれが何かのデータを特定するための参照画面であったならそれがモーダル表示されていれば、元の登録画面(例ですが)すらも再描画しないで選択結果を表示できないか、とにかく、かつてのクラサバのように画面の一部を更新していく形を目指したいなと。

jQueryを使用したページネーションはいくつかあります。そのどれを選べばいいかが悩ましい。中には新しいバージョンのjQueryでは動かず、わざわざ古いものを持ってこなくてはならないものもあるようです。

調べた限りでは、twbs-paginationが更新がよくされており、最新の環境にも対応していそうです。

ただ、用意しなければならないcss,jsが多い。bootstrapありきです。そのbootstrapの4を使うのであればtether.jsも必須になります。

以下のページからzipをダウンロードして、解凍すると、

jquery.twbsPagination.jsが入手できます。

そしてexamplesフォルダの中に2つhtmlファイルが入っており、その中を見れば他に何が必要かわかります。

http://esimakin.github.io/twbs-pagination/

index.htmlは動かしても何も表示しません。jsやcssの呼び出しの設定がなんかすごくいい加減でそこで失敗しているからです。しかし、何が必要なのかはわかります。

bootstrap-v4.htmlのほうはhttpsで必要なものを指定しているので正しく動作します。どれも最新を使っています。

なかなか時間が取れないのですが、ここらあたりを使ってデータの持ち回りを最小限に抑えた作りをやってみたいです。

しかし、その前に学校の授業で使うアプリを作らないといけません。。んー時間が。。