DataTables が動かない時のチェック項目
DataTables 全般
DataTables で一般的に生じるトラブルシューティング。
スクリプトの読み込み順
DataTables スクリプトは jQuery の後に読み込ませる必要があります。
- jQuery jquery.min.js
- DataTables datatables.min.js
- 実行スクリプト $('#myTable’).DataTable();
カンマはあるか
コピペした時に見落としがちなのがカンマ ” , ”。
１から書いていると忘れないものですが、追記や挿入した時はチェックするほうがいいです。
バージョンは最新か
jQuery と DataTables のバージョンによって動かないことがあるので、支障があれば最新版で確認します。
必要な Extension が導入されているか
レスポンシブなどのオプションを利用するには Extenstion（機能拡張）が必要になります。CDNなら必要に応じてURLを取得します。
Concatenate（結合）でダウンロードしたファイルをサーバーに置いているなら、必要な機能拡張を加えて設置します。個別でダウンロードするなら、機能拡張のファイルのパスも加えます。
排他的な機能を使っていないか
レスポンシブと横軸スクロール（scrollX）のように、同時には使えない機能があります。利用しているオプションが排他的な機能ではないかは、予め確認しておくほうがいいです。
data: で入力する二次元配列が n x m になっているか
スプレッドシート（表計算ソフト）などで作った表をエクスポートすると、途中から末尾まで空の列が続いたところの区切り（カンマ や タブ など）が省略されることがあります。
二次元配列にする際、空になった部分を埋めないとデータの型が合わず、正常に動きません。
Wordpress
WordPress では、body 内にスクリプトやスタイルを書き込むときに生じやすいトラブル。
CSSファイルやスクリプトの読み込みは head または foot に挿入するほうがトラブルは減ります。スクリプトは body 内に設置できますが、空行があると動かないなどの制約があります。
CSSファイルが読み込まれているか
<link rel>はテキストモードでは body 内に設置できますが、ビジュアルモードに移動すると消えてしまいます。
head 内に挿入するのが望ましいですが、それが難しいならビジュアルモードに移動せず、テキストモードのみで作業を終わらせるしかありません。
script 内に空行がないか
<script>～</script>内に空行があると実行されません。
空行を削除して詰め詰めにすれば動くはず。
テーブル（表関連）
HTML 部分でミスしやすいこと。
table に一意の id をつけているか、スクリプトと対応しているか
複数のテーブルを配置しているページでテーブルやスクリプトをコピペすると、テーブル id やスクリプトのCSSセレクタが重複することがあります。
一つ一つ見直して、重複しないように配置します。
スクリプトのCSSセレクタは一般的な jquery と同じく カンマ “," で複数の id を指定できます。
thead tbody をつけているか
列のタイトルである最初の行には thad を、ソートや検索対象とするデータ部分には tbody をつけないとうまく機能しません。
thead にあたる「列のタイトル」を columns で挿入し、data で配列を tbody に挿入する場合はなくても動きます。