Spring Boot 2 + JQuery DataTablesで一覧画面を作成

f:id:fa11enprince:20200709020731j:plain
今更ながらjQuery系ですが、使ったことがなくてでも便利そうなので使ってみました。
皆さん大好きSpring Boot 2を使用しました。
また、Pagingが面倒なので皆さん大嫌いHibernateを利用しています。
結論としてはJQuery DataTablesは思ったより使いやすくて便利だ！ということです。
もしかして、サーバーから全件読んでクライアント側でこねこねしないとだめなやつ？
と思いましたが、そんなことはなく、便利なやつです。柔軟性が高いです。
serverSide: trueオプションをつけるとちゃんとサーバから10件取って、ページャー押したら10件取って、
が簡単に実現できます。

できあがったもの
- 動作に必要なもの
- 実行方法
JQuery DataTableとSpring Bootの組み合わせの解説編
ハマった内容
- 応答が受け取れない
- Spring側でリクエストをマッピングできない
Springでのエラーハンドリング
参考

できあがったもの

f:id:fa11enprince:20200722221444p:plain 画面は3画面作っていて、

旧スタイルのサーバーサイドレンダリング(?)オンリーの画面
とりあえずのVueの画面
今回本題のJQuery DataTablesを使用した画面

でできています。おまけ程度にログインもついています。

動作に必要なもの

Maria DB
bash (Git Bashとか)
Java 8
あとはそもそもGitにあがっているか、pom.xmlちゃんが引っ張ってきてくれます。

実行方法

EclipseでMaven installをして実行します。この場合Lombokが必要になります。
もしくは…

cd my-address-search
bash mvnw install
java -jar target/my-address-search-0.0.1-SNAPSHOT.jar

とかで実行してhttp://localhost:8080/でOKと思います。

編集、削除用のエリアは設けたものの見てお分かりの通り実装していないです。

ところどころ手を抜いているところはあるのであくまでサンプルとしてご容赦いただければ。
データはある程度多めのリアルのデータが良いということで、
郵便番号データを使用しています。
ただし、日本郵便で公開しているものは問題が多いCSVなので、
ここで公開させてくださっているありがたいデータを使っています。

あと細かいところはGitHub上のREADME.mdを見ていただければと思います。

JQuery DataTableとSpring Bootの組み合わせの解説編

近日追記する予定です。わかる人はコードを見るとわかるかと…。

ハマった内容

応答が受け取れない

success: function(json) {
}

で受け取れない。
てか、なんとも言わず…ダメな感じになる。
こういう感じで何かサーバーのレスポンスをcallbackでごにょごにょしたいときは

dataSrc: function(json) {
}

というJQuery DataTableの専用のメソッドを使いましょう。
というか公式ドキュメント読まないとだめですね。
割と丁寧なドキュメントなので読みましょう。

Spring側でリクエストをマッピングできない

List<T>型を受け取れないのに、受け取れないということがありました。
具体的にはJavaScript側でソート内容を作ってサーバーに送り付けるのに、

var sortDatas = [];
for (var i = 0; i < data.order.length; i++) {
    var index = data.order[i].column;
    var direction = data.order[i].dir;
    var columnName = data.columns[index].data;
    var sd = {
        "direction": direction,
        "property": columnName,
    };
    sortDatas.push(sd);
}
...
orders: sortDatas, ...

のようなことをやって、

"orders": [{"direction": "asc", "property":"city"}, {"direction": "asc", "property":"district"}]

のようなソート順をサーバー側に渡したときに、JQuery DataTablesが
orders[0][property] = "city", orders[0][direction] = "asc"
としてしまいSpringのControllerの引数(リクエストパラメータ)処理側でどうにもならない問題です。
むりやりJacksonでCustom Json Desirializer的なものを書くのか？？うーんと悩んでいましたが、
そもそもJQuery DataTablesが行っているSerializeを変えてやればいいというお話でした。
orders[0][property] = "city"をorders[0].property = "city"に変えてやればSpring側で解釈できます。
そのために使っているのが、jquery.spring-friendly.jsです。

ここで気づいたのですが、そもそも便利なものがやはりあるのですね。今回は自力で頑張っていますが、これを使えば一挙解決です。