Javascriptによるデータテーブルの機能拡張そのニ

前回の記事 Javascriptによるデータテーブルの機能拡張 の続きとして、今回はデータテーブルのソート機能のカスタマイズについて説明します。

よく使うソートの内容を登録してボタン一発で指定のソート順で表示できるようにしたいという要望がお客様からありました。 標準機能にはありませんので、データテーブルの機能拡張例としてご紹介します。

SkyVisualEditorのデータテーブルのソートやページングなどの機能はjQueryのtablesorterプラグインをカスタマイズして実装されています。かなりのカスタマイズを施したので本来のAPIがそのまま利用できるわけではありませんが、今回はそれを使った外部からソート順を操作し、機能を拡張する例をご紹介します。

まずは下準備として、操作する対象のテーブルのインスタンスを取得します：

var t = jQuery("[id$=TableID_table]");
//TableIDの部分を指定したいデータテーブルの「ID」プロパティと置き換えてご利用ください。

ここで取得したインスタンス経由でテーブルの操作が可能です。今回の記事はソートについてのみ説明しますが、同じ要領でデータ、見た目などの操作が出来ますのでまた次の機会に紹介できればと思います。

//左から数えて2番目列を昇順に並び替える（カウントは0スタートのため、列数-1での指定になります）
var sorting = [[1,0]]; 
//外部からソートイベントを発生させる
t.trigger("sorton",  [sorting]); 

ソートの指定方法は単純で、[列数,ソート順]の形式を配列で渡してイベントを発火させるだけです。ソート順は0の場合昇順、1の場合降順となります。

データテーブルは設定によってレコード選択用のラジオボタン、行削除ボタンなどが配置されいる場合が多いので、列数の指定はそれらを含めて数えた列数で指定する必要があります。複数列を使ったソートも以下の形で指定できます。

//2番目列を昇順に3番めの列を降順に
var sorting = [[1,0],[2,1]]; 
t.trigger("sorton",  [sorting]); 

後は業務用件に合わせて作成したいボタンごとにスクリプトを作成し、カスタムボタンのJavascriptとして設定すれば完成です。

今後も引き続きSkyVisualEditorをより便利に利用できるテクニックを投稿していきますので、よろしくお願いします。