DataTablesを日本語化したときの留意点

DataTablesについて

DataTablesはHTML上で表（テーブル）を扱う時に非常に便利なJavaScriptのライブラリです。
高機能で、必要になりそうな操作はほとんどがプラグイン形式で用意されています。
そのなかで、1点、重要と思われる留意点を見つけましたので共有したいと思います。

国際化プラグイン（language.urlオプション）はテーブルの初期化を非同期にする

国際化プラグインを使ってUIの日本語化（国際化）を行うと、設定オブジェクトの取得がAjaxで行われるため、$(dom).DataTable()による初期化とそれ以降の処理のタイミングがずれます。
公式ドキュメントにもちゃんと注意書きがありました。

Note that when this parameter is set, DataTables' initialisation will be asynchronous due to the Ajax data load. That is to say that the table will not be drawn until the Ajax request as completed. As such, any actions that require the table to have completed its initialisation should be placed into the initComplete option callback.

つまり、公式ドキュメントで仮に下記のような見本があったとして、

var table = $("#DataTable").DataTable({...});//オプションを渡して初期化
table.xxxApi().doAnythng();//何かのAPIを呼び出してDateTablesを操作する

初期化のオプションにlanguage.urlが含まれていると2行目のAPIの動作は保証されません。
DataTablesを使っていて、APIの挙動がおかしい、イベント処理やDOM制御が上手くいないときは、これを疑ってください。

解決策

initCompleteオプションを使う

DataTablesの初期化オプションに用意されているinitCompleteオプションでハンドラを設定して、DataTablesの初期化が完了してから後続の処理を行います。

$("#DataTable").DataTable({
    "language" : {"url":"any.json"},
    "initComplete" : function(settings, json) {
        this.xxxApi().doAnythng();//ここで処理する
    }
});
//以下、DataTablesとは関係しないその他の処理

この場合はthisでAPIにアクセスできますが、別途、関数を定義して実行する場合には$(dom).DataTable()と$(dom).dataTable()の違いにも注意が必要です。
ちなみに、このハンドラではDataTableの設定オブジェクトとテーブル内のデータを受け取ることができますので、それらに応じて諸々の処理が可能です。

language.urlを使用しない

素直にlanguageオプションにコードからオブジェクトで設定を渡す方法もあります¹。日本語の設定はこのページに記述されています。カスタマイズの際にも参考にしましょう。
この場合は実行タイミングのずれがないため、公式ドキュメントの例の通りに記述しても動作してくれるはずです。

まとめ

DataTablesは便利で高機能ですが、それだけに動作は複雑です。機能とそれに関わるAPIやオプションは、Google先生の翻訳に頼りながらでも一読しておきましょう。
私は拡張機能のButtonsのDOM操作で数時間悩みました。Buttons自体はとても便利な拡張ですよ。

---

1. 項目も多いしバージョン変更などがあると対応に追われそうですが… ↩