9 の書き方に基いて次のようなオプション指定をしていたのですが、
"bFilter": true,
"bInfo": true,
"aoColumns": [
"columnDefs": [
{
"bSortable": false, "aTargets": [ 17 ]
}
]
],
"oLanguage": {
"sSearch": "フィルター: ",
"sLengthMenu": "表示件数: _MENU_",
"oPaginate": {
"sNext": "次のページ",
"sPrevious": "前のページ"
},
"sInfo": "全 _TOTAL_ 件中の _START_ から _END_ を表示"
}
…バージョン 1.10 の書き方に基いて、次のように変更する必要があります※。
"searching": true,
"info": true,
"columns": [
"columnDefs": [
{
"orderable": false, "targets": [ 17 ]
}
]
],
"language": {
"search": "フィルター: ",
"lengthMenu": "表示件数: _MENU_",
"paginate": {
"next": "次のページ",
"previous": "前のページ"
},
"info": "全 _TOTAL_ 件中の _START_ から _END_ を表示"
}
※ bFilter や oLanguage のオプションは、バージョン 1.9 の書き方でも動作しました。ただ、すべてのオプションが古い書き方で動作するかどうかは未確認です。
TeamPage での DataTables
Proteus スキンと Ajax ロード
TeamPage の標準スキンである「Proteus (プロテウス)」は、ページを一度だけ読み込み、ユーザーによる画面操作が行われたときに、コンテンツ（内容）だけを AJAX で読み込む仕組みになっています。このため、<head> タグ内に書かれた $(document).ready は、コンテンツが読み込まれてない段階で一度だけ実行され、<body> タグ内に書いた JavaScript は、Ajax によってスクリプトそのものが後から読み込まれ、読み込み時には実行されません。
これは、すなわち、(1) ページの読み込み完了時には、DataTables を適用する HTML のテーブルはまだ読み込まれてない、(2) $(document).ready で DataTable() を実行しても適用対象のテーブルが（まだ）存在しない、(3) Ajax によって後から DataTable() を読み込んでも実行されない、ということを意味します。
端的に言うと、「Proteus スキンで DataTables を使うのには工夫が必要」ということです。
工夫: iframe を使う
そこで、テーブルや DataTable() を Proteus スキンではない別のページに作成し、Proteus スキンのコンテンツとして<iframe> タグを使って読み込むことにします。
こんなイメージです。
親ウィンドウに <iframe> による「窓」を開け、テーブルを作成した子ウィンドウを「窓」と同じ大きさにして、窓の向こう側に表示します。子ウィンドウは、昔ながらの HTML ページで、Ajax で後からコンテンツが読み込まれるページではありません。親ウィンドウの <iframe> からリクエストされて生成されるので、子ウィンドウ内の DataTable() は子ウィンドウが生成される際に子ウィンドウ内で実行されます。
工夫: 高さの自動調整
テーブル右上の「フィルター」欄（デフォルトでは「Search」と表示されています）にテキストを入力すると、入力されたテキストを含む行だけが絞り込み表示されます。軽快に動作するので、目的の行を見つけるのにとても便利です。
このとき、表示された行に合わせてテーブルの高さが変化するわけですが、親ウィンドウの「窓」の高さは固定されているので、行数が少なくなった分だけ「窓」の中に空白が生じてしまいます。
この問題を回避するため、「子ウィンドウのテーブルの高さが変化したら、親ウィンドウの窓の高さを変化させる」という工夫を施すことにしました。具体的には、次のコードを子ウィンドウに挿入しました。
function resizeParentDIV() {
setTimeout(function(){
var bodyHeight = $('#datatable-${id}').height();
// Set the height of the DIV container in the parent document.
$('#datatables-iframe-container-${id}',parent.document).css({height:(bodyHeight+72)});
// Set the height of the IFRAME in the parent document.
$('#datatables-iframe-${id}',parent.document).css({height:(bodyHeight+72)});
},0);
};
$(document).ready(function(){
resizeParentDIV();
$(document).on('DOMSubtreeModified propertychange', "#datatable-${id}", function(){
resizeParentDIV();
});
});
コード中の ${id} は、「id」という名前の変数の値の参照を意味します。（SDL では、${変数名} と書いて値を読み出せます）
まず、resizeParentDIV という関数を定義しました。この関数は、テーブルの高さを ID: datatable-${id} を元に調べ、マージンの高さを追加して、親ウィンドウの <iframe> とそれを囲む <div> の高さに反映させます。
そして、テーブルの内容が変化したことを DOMSubtreeModified propertychange イベントとして感知し、resizeParentDIV 関数を実行します。
これにより、テーブルの高さの変化に親ウィンドウの <iframe> の高さが追従するようになり、空白が生じないようにできました。
SDL 関数としての DataTables
この「子ウィンドウを呼び出すコード」は、TeamPage の開発言語である SDL で定義されています。この部分を関数とすることで、テーブルに表示する記事の種類、列の種類、行数など、表に表示する内容や細かな設定をパラメーターとして渡して簡単に指定できるようにしました。
下図は、動作テストのための画面で、上部にパラメーターの種類と対応する値、下部に実行結果（親ウィンドウの <iframe> 内に表示された、子ウィンドウのテーブル）が表示されています。
TeamPage 開発者は、DataTables のプラグインをお使いの TeamPage に組み込むだけで、この DataTables 用の SDL 関数を利用できるようになり、さまざまな記事を DataTables を使ってスプレッドシート表示できるようになります。例えば、タスクの一覧や問い合わせの一覧などを表示すれば、特定の条件のもの（例えば、「山田さんが担当するもの」など）を素早く見つけることができます。
また、開発者だけでなく、一般ユーザーがより簡単に利用できるように、将来的にはウィジェットや CSV ダウンロード機能も追加する予定です。ご期待ください。（2016/06/09 追記: ウィジェットとして利用できるようにした DataTables プラグイン をリリースしました。）
関連記事
チーム パフォーマンス向上を目的としたタスク トラッキング ... 仕事を効率化してチームワークを高めるための、タスクやプロジェクト管理機能の紹介です。
チームのコラボレーションを促進するタスクトラッキング ... 自分やチームメンバーのアクション プラン、状況、仕事量、各メンバーの進捗、チーム全体の進捗を簡単に確認することで、共通のゴールに向けた各種活動をスムーズに進められます。
プラグインやアプリの紹介 ... TeamPageで利用できるいろいろなプラグイン/アプリの一部を紹介します。
ソーシャルグラフ、インタレストグラフ、そしてワークグラフ ... 投稿内容やユーザー情報などの「仕事に必要な情報」が、どのように結びつき、活用できるのかを紹介します。
