timeago jqueryプラグインを使用して、データテーブルの列のタイムスタンプをフォーマットしています。DataTablesオプションを使用すると、次のfnDrawCallback
ようなフォーマットされたタイムスタンプを設定/更新できます。
<abbr class="timeago" title="2008-07-17T09:24:17Z">July 17, 2008</abbr>
より人間が読める形式に2 years ago
。これは、テーブルの再描画があるときにいつでも呼び出されるため、ページネーション、サーバー呼び出しなどで機能します。
myTable = $('#example').dataTable({
"fnDrawCallback" : function () { $("abbr.timeago").timeago() },
"aaData" : tableData,
"aoColumns" : tableHeadings,
"oSearch" : {"sSearch" : "", "bRegex" : true, "bSmart" : true, },
});
ただし、fnDrawCallback
検索インデックスは更新されないため、クエリでyears
は何も返されません。DataTablesに検索インデックスを更新させる方法はありますか?
編集
わかりやすくするために、初期化tableData
しtableHeadings
、ハッシュの配列をJSONを介して渡します。このデータは問題なくテーブルに表示されるため、これは正常に機能しているようです。問題は、TimeagoがDOMを変更することfnDrawCallback
です。これは、テーブルのフィルター/ソートインデックスが入力された後に発生します。
// tableHeadings === ['a', 'b', 'DateOne', 'DateTwo', ...]
for(i=0; i<tableHeadings.length; i++) {
tableHeadings[i] = { "sTitle" : tableHeadings[i], };
if(tableHeadings[i].sTitle.match(/Date/)) {
tableHeadings[i].fnRender = function (c) { // closure over i
return function (o) {
var iso_time = o.aData[c].replace(/\s/, "T") + "Z";
return '<abbr class="timeago" title="'+iso_time+'">'+'</abbr>';
}
}(i);
}
}
したがって、を検索することはできますが、を検索することはできiso_time
ません2 years ago
。