コピペで動くjQuery DataTablesの導入と日本語対応

jQueryを使った高機能で導入な簡単なデータテーブルプラグインの導入手順のメモです。

DataTables Table plug-in for jQuery
http://www.datatables.net/

MITライセンスで利用できます。フォーラムを見たい場合や商用サポートを受けたい場合のは有料プランがあります。

まずjQuery本体とプラグインのcssとjsを読み込みましょう。

 <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.4/css/jquery.dataTables.min.css" />
  <script src="//cdn.datatables.net/1.10.4/js/jquery.dataTables.min.js"></script>

次に日本語でメニューが表示されるようにします。日本語ファイルが準備するのでURLで指定するだけです。

$(document).ready(function(){
 $('#targetTableID').DataTable({
  "language": {
   "url": "//cdn.datatables.net/plug-ins/3cfcc339e89/i18n/Japanese.json"
  },
 });
});

以上これだけで導入が完了です。エクステンションも準備されていて、導入も簡単でとても便利です。