いよいよ花粉が飛び交う季節になり、去年買った花粉用の眼鏡を使ってますが、効果あるんですかねコレ…？
結局目が痛いような痒いような感じになってます。
前回はJQueryのDataTablesプラグインについて紹介しました。
今回はAjax連携について、その手順を紹介していきます。
Ajax連携
DataTablesプラグインは元々Ajaxの利用が想定されているので、単純にファイル内のjson形式データを読み込むくらいであれば、簡単に実装できます。例として、次のようなHTMLファイルを作成後、ブラウザで開いてみてください。
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/s/dt/dt-1.10.10/datatables.min.css"/>
<script src="http://code.jquery.com/jquery-2.2.0.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/s/dt/dt-1.10.10/datatables.min.js"></script>
</head>
<body>
<table id="books_table">
<thead>
<tr>
<th>Title</th>
<th>Author</th>
<th>Genre</th>
<th>Page</th>
<th>Publication</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</body>
<script>
$(document).ready(function() {
$('#books_table').DataTable({
"ajax": {
url: "data.json",
}
});
});
</script>
</html>
<head>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/s/dt/dt-1.10.10/datatables.min.css"/>
<script src="http://code.jquery.com/jquery-2.2.0.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/s/dt/dt-1.10.10/datatables.min.js"></script>
</head>
<body>
<table id="books_table">
<thead>
<tr>
<th>Title</th>
<th>Author</th>
<th>Genre</th>
<th>Page</th>
<th>Publication</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</body>
<script>
$(document).ready(function() {
$('#books_table').DataTable({
"ajax": {
url: "data.json",
}
});
});
</script>
</html>
こんな感じの画面が開きました。
テーブルのデータ部分が"Loading..."となっているはずです。
上記のHTMLでは、DataTablesプラグインがAjax連携で利用している設定を黄色字にしています。
そのなかで「url: "data.json"」と書かれていますが、これは「"data.json"内のデータをAjax通信により取得して表示する」ことを示します。
まだ"data.json"を作成していないので、当然読み込みには失敗します。
では、HTMLファイルと同じディレクトリに"data.json"ファイルを作成してみます。
{
"data": [
[
"異類婚姻譚",
"本谷 有希子",
"小説",
168,
"2016-01-21"
],
[
"パーフェクト Ruby on Rails",
"すがわらまさ のり，前島真一，近藤宇智朗，橋立友宏",
"技術書",
432,
"2014-06-06"
],
[
" すごい家事 人生の「掃除の時間」をグッ と縮める",
"松橋 周太呂",
"生活",
207,
"2015-12-04"
],
[
"おやすみ、ロジャー 魔法のぐっすり絵本",
"カール＝ヨ ハン・エリーン",
"絵本",
32,
"2015-11-12"
],
[
"死んでいない者",
"滝口 悠生",
"小説",
152,
"2016-01-28"
],
[
"マネジメント 基本と原則",
"Ｐ．Ｆ．ドラッカー",
"経済・ビジネス",
320,
"2001-12-14"
]
]
}
"data": [
[
"異類婚姻譚",
"本谷 有希子",
"小説",
168,
"2016-01-21"
],
[
"パーフェクト Ruby on Rails",
"すがわらまさ のり，前島真一，近藤宇智朗，橋立友宏",
"技術書",
432,
"2014-06-06"
],
[
" すごい家事 人生の「掃除の時間」をグッ と縮める",
"松橋 周太呂",
"生活",
207,
"2015-12-04"
],
[
"おやすみ、ロジャー 魔法のぐっすり絵本",
"カール＝ヨ ハン・エリーン",
"絵本",
32,
"2015-11-12"
],
[
"死んでいない者",
"滝口 悠生",
"小説",
152,
"2016-01-28"
],
[
"マネジメント 基本と原則",
"Ｐ．Ｆ．ドラッカー",
"経済・ビジネス",
320,
"2001-12-14"
]
]
}
作成後、ブラウザを更新してみると、"data.json"のデータがテーブル形式で表示されているはずです。
表示されていない場合、次のようなケースが考えられます。
- "data.json"を作成しても、テーブルが"Loading..."のまま
多くの場合、データの読み込み失敗が原因です。これまでの流れで起こりやすいのは、以下の2点かと思います。
1."data.json"がHTMLファイルと同ディレクトリに存在しない
読み込み対象を相対パスで指定しているので、"data.json"がHTMLファイルと同じディレクトリに存在しなければ、読み込みエラーとなります。
2.ブラウザによるローカルリソースへのアクセス禁止
一部のブラウザ（Chrome等）では、ローカルリソースへのアクセスを禁止しているようで、"data.json"がローカル環境にある場合、ブラウザが"data.json"の読み込みを阻害している可能性があります。ブラウザごとにアクセス禁止を緩和する設定がありますが、ブラウザにこだわりがなければ、別のブラウザで表示を確認してみましょう。（FireFoxは表示できました） - テーブルにデータは表示されたが、文字化けしている
jsonはデフォルトでUTF-8でエンコードされているので、"data.json"ファイルの文字コードを"UTF-8"にしておけば、文字化けは解消するはずです。
