Salesforce の pageBlockTable のヘッダー行クリックでソートする方法

仕事で Salesforce を使ったシステムを開発していて
「一つの画面に複数の表を表示する」
という機能の実装時にハマったのでメモ。

ちなみに、以下は作りたかったの画面の例。
（一日の気温を、一時間毎の表・一日の平均の２つ表示してみたい）

２つの表は pageBlockTable でよいのだけれど、問題はソート機能。
Salesforce のオブジェクトのビューでは、表のヘッダー行クリックでソートができる。
ただし pageBlockTable を使った表には、その機能はない。
（同じことをやろうとすると、ソート機能を実装し直さなければいけないっぽい）

簡単に同様のことをやれないか、ググッてみると以下の記事を発見！！
要は、DataTables という jQuery のプラグインが良さげらしい。

Client-side sorting and pagination of an apex:pageBlockTable

これを基に、冒頭の例の画面を作ってみよう。
まずは、気温オブジェクトを作る。

テストデータは、気象庁のページを元に、手入力でポチポチ入れる。

次に、DataTables の Getting started を参考に、Visualforce page, component, Apex を作成。

（VF page は VF component を呼び出すのみ)

このようにすると、冒頭の画像のように

• ページング
• 検索
• ソート

機能を表に付けることができた。

気をつけなければいけないのは、このページング・検索・ソート機能は都度 SOQL をクエリするのではなく、初めに取得したレコードの表示順を変えているという点。

なぜかというと、SOQLは確かガバナ制限で5万件までしか結果を取得できなかったはず。

なので、例えば5万1件あるレコードに対して、表のヘッダー行クリックで ASC -> DESC のようにソートした時、5万件目のレコードが一番上に表示されることになってしまう。（本来、5万1件目が一番上に表示されてほしい）

まあ、直近5万件も一気に取得することはないと思う。。。

なので、これで十分という気がしている。