いよいよ花粉が飛び交う季節になり、去年買った花粉用の眼鏡を使ってますが、効果あるんですかねコレ…？
結局目が痛いような痒いような感じになってます。
前回は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"にしておけば、文字化けは解消するはずです。
Ajax連携（サーバサイド）
単純なデータをjson形式のデータにして表示するのは簡単でしたが、DBから最新のデータを表示したい場合はどうでしょうか？前回、DataTablesプラグインをRailsで利用し、データを表示させてみましたが、これからAjax対応する手順を説明していきます。
ちなみに、前回作成した画面はこんな感じでした。
1.index.html.erb（一覧表示画面）修正
まずは表示用画面を修正していきます。
index.html.erb
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/s/dt/jq-2.1.4,dt-1.10.10/datatables.min.css"/>
<script type="text/javascript" src="https://cdn.datatables.net/s/dt/dt-1.10.10/datatables.min.js"></script>
<p id="notice"><%= notice %></p>
<h1>Listing Books</h1>
<table id="books_table">
<thead>
<tr>
<th>Title</th>
<th>Author</th>
<th>Genre</th>
<th>Page</th>
<th>Publication</th>
// <th></th>
// <th></th>
// <th></th>
</tr>
</thead>
<tbody>
// <% @books.each do |book| %>
// <tr>
// <td><%= book.title %></td>
// <td><%= book.author %></td>
// <td><%= book.genre %></td>
// <td><%= book.page %></td>
// <td><%= book.publication %></td>
// <td><%= link_to 'Show', book %></td>
// <td><%= link_to 'Edit', edit_book_path(book) %></td>
// <td><%= link_to 'Destroy', book, method: :delete, data: { confirm: 'Are you sure?' } %></td>
// </tr>
// <% end %>
</tbody>
</table>
<br>
<%= link_to 'New Book', new_book_path %>
<script>
$(document).ready(function() {
$('#books_table').DataTable({
serverSide: true,
ajax: '/books/list',
});
});
</script>
<script type="text/javascript" src="https://cdn.datatables.net/s/dt/dt-1.10.10/datatables.min.js"></script>
<p id="notice"><%= notice %></p>
<h1>Listing Books</h1>
<table id="books_table">
<thead>
<tr>
<th>Title</th>
<th>Author</th>
<th>Genre</th>
<th>Page</th>
<th>Publication</th>
// <th></th>
// <th></th>
// <th></th>
</tr>
</thead>
<tbody>
// <% @books.each do |book| %>
// <tr>
// <td><%= book.title %></td>
// <td><%= book.author %></td>
// <td><%= book.genre %></td>
// <td><%= book.page %></td>
// <td><%= book.publication %></td>
// <td><%= link_to 'Show', book %></td>
// <td><%= link_to 'Edit', edit_book_path(book) %></td>
// <td><%= link_to 'Destroy', book, method: :delete, data: { confirm: 'Are you sure?' } %></td>
// </tr>
// <% end %>
</tbody>
</table>
<br>
<%= link_to 'New Book', new_book_path %>
<script>
$(document).ready(function() {
$('#books_table').DataTable({
serverSide: true,
ajax: '/books/list',
});
});
</script>
追加箇所は黄色字、削除（実際はコメントアウト）箇所は赤字にしています。
追加しているのは、DataTableの"serverSide"パラメータと"ajax"パラメータの2箇所です。
"serverSide"パラメータはデータの取得や並び替え、絞り込みなどの処理を通信先で行うかどうかを表すパラメータです。
このパラメータを"true"にすると、最初の画面描写以降でデータの並び替えやソートを行うとき、Ajax通信を行ってデータを再度取得し、常に最新のデータを表示することができます。
ただし、データの並び替えやソートなどの機能をサーバ側で実装しなくてはならなくなります。
"ajax"パラメータはAjax通信先を指定します。Railsで利用する場合、"コントローラ名/アクション名"の形式で指定します。
上記の場合、"books_controller"の"list"アクションにAjax通信を試みます。
削除している、<tbody>タグ内の値と、一覧表示した際の参照・編集・削除リンクのヘッダ部分の2箇所です。
<tbody>タグ内の値は、Ajax通信が行われると自動的に書き換えられてしまうので、残しておく必要がありません。
参照・編集・削除リンクのヘッダ部分は最終的には戻しますが、まずAjax連携を確認するには邪魔になってしまうので、一時的に削除しています。
2.config/routes.rb（ルーティング）修正
前の手順で"books_controller"に"list"アクションを追加しましたが、対応するアクションの追加もルーティングもしていないので、当然Ajax通信は失敗します。
そのため、まずはルーティングを修正します。
config/routes.rb
Rails.application.routes.draw do
resources :books do
collection do
get 'list'
end
end
～略～
resources :books do
collection do
get 'list'
end
end
～略～
通常のRailsのルーティング方法にのっとり、GET通信によるlistアクションのルーティングを追加しました。
3.books_controller.rb（コントローラ）修正
最後に"books_controller"の"list"アクションを追加し、一覧画面からのAjax通信を受けた際に返すデータを実装します。
前述したように、コントローラでデータの並び替えや絞り込みを実装させる必要がありますが（"serverSide"パラメータを"true"にした場合）、まずはデータ表示をさせるところまでを実装します。
books_controller
class BooksController < ApplicationController
～略～
def list
books = Book.pluck(:title, :author, :genre, :page, :publication)
respond_to do |format|
format.json {
render json: {
data: books,
}
}
end
end
～略～
～略～
def list
books = Book.pluck(:title, :author, :genre, :page, :publication)
respond_to do |format|
format.json {
render json: {
data: books,
}
}
end
end
～略～
"list"アクションはDBから必要なデータを取得し、json形式でデータを返すという簡単なものです。
※ Bookテーブルのカラムについては、前回のブログを参照してください。
ここで一覧表示画面を開くと、Ajax連携により、DBのデータを表示するようになっています。
ただし、画面内で操作をしたり、よく画面を見てみるとおかしいところが残っています。
ソートするカラムの変更や、ソートの降順・昇順の切り替え、絞り込みをしても、それらの操作が実際には働きません。（Ajax通信自体はしているので、画面表示した後にデータを追加 or 削除していれば、その結果は反映されます）
画面標示としても、テーブル下部に"Showing 0 to 0 of 0 entries"(0件中0件)と表示されていたり、ページ数が5以上あることになっていたり…。
他にも見た目を変えられるオプションもあるので、次回それらの紹介を行い、DataTablesプラグインについての話を一先ず終えようと考えています。
0 件のコメント:
コメントを投稿