2016年3月1日火曜日

JQueryのDataTablesプラグインを使って、データをテーブル形式で画面に表示してみる【Ajax連携①】

こんにちは、井下です。

いよいよ花粉が飛び交う季節になり、去年買った花粉用の眼鏡を使ってますが、効果あるんですかねコレ…?
結局目が痛いような痒いような感じになってます。


前回は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>


こんな感じの画面が開きました。


テーブルのデータ部分が"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"
    ],
    [
      "マネジメント 基本と原則",
      "P.F.ドラッカー",
      "経済・ビジネス",
      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>


追加箇所は黄色字、削除(実際はコメントアウト)箇所は赤字にしています。

追加しているのは、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

~略~

通常の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

~略~


"list"アクションはDBから必要なデータを取得し、json形式でデータを返すという簡単なものです。
※ Bookテーブルのカラムについては、前回のブログを参照してください。


ここで一覧表示画面を開くと、Ajax連携により、DBのデータを表示するようになっています。


ただし、画面内で操作をしたり、よく画面を見てみるとおかしいところが残っています。

ソートするカラムの変更や、ソートの降順・昇順の切り替え、絞り込みをしても、それらの操作が実際には働きません。(Ajax通信自体はしているので、画面表示した後にデータを追加 or 削除していれば、その結果は反映されます)

画面標示としても、テーブル下部に"Showing 0 to 0 of 0 entries"(0件中0件)と表示されていたり、ページ数が5以上あることになっていたり…。


他にも見た目を変えられるオプションもあるので、次回それらの紹介を行い、DataTablesプラグインについての話を一先ず終えようと考えています。

0 件のコメント:

コメントを投稿