0

テーブルツールをレールでまったく動作させることができないようです。jquery-datatables gem を使用して、http: //railscasts.com/episodes/340-datatables でデータ テーブルを設定する手順に従いました。私はコーディングが初めてなので、答えは簡単かもしれませんが、単純に理解できません。

ここに私のapplications.jsがあります：

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require dataTables/jquery.dataTables
//= require dataTables/extras/TableTools
//= require dataTables/extras/ZeroClipboard
//= require_tree .

私のapplication.css：

 *= require_self
 *= require dataTables/jquery.dataTables
 *= require dataTables/extras/TableTools
 *= require_tree .

そして、これは私の index.html.erb です:

<h1>Products</h1>

<script>
    $(document).ready( function () {
      $('#products').dataTable( {
        "sDom": "<'row-fluid'<'span6'T><'span6'f>r>t<'row-fluid'<'span6'i><'span6'p>>",
        "oTableTools": {
          "sSwfPath": "media/swf/copy_csv_xls_pdf.swf",
          "aButtons": [
            "copy",
            "print",
            {
              "sExtends":    "collection",
              "sButtonText": 'Save <span class="caret" />',
              "aButtons":    [ "csv", "xls", "pdf" ]
            }
          ]
        }
      } );
  } );
</script>

<table id='products'>
  <thead>
    <tr>
      <th>Created</th>
      <th>Updated</th>
      <th>Product name</th>
      <th>Category</th>
      <th>Release date</th>
      <th>Price</th>
      <th>Buy</th>
      <th>Notes</th>
      <th></th>
      <th></th>
      <th></th>
    </tr>
  </thead>

  <tbody>
    <% @products.each do |product| %>
      <tr>
        <td><%= product.created_at.strftime("%m/%d/%Y") %></td>
        <td><%= product.updated_at.strftime("%m/%d/%Y") %></td>
        <td><%= product.Product_Name %></td>
        <td><%= product.Category %></td>
        <td><%= product.Release_Date %></td>
        <td><%= product.Price %></td>
        <td><%= translate(product.Buy.class)%></td>
        <td><%= product.Notes %></td>
        <td><%= link_to 'Show', product %></td>
        <td><%= link_to 'Edit', edit_product_path(product) %></td>
        <td><%= link_to 'Destroy', product, method: :delete, data: { confirm: 'Are you sure?' } %></td>
      </tr>
    <% end %>
  </tbody>
</table>

<br>


<%= link_to 'New Product', new_product_path %>

そのまま、次のエラーが発生します。

DataTables 警告 (テーブル ID = 'products'): DataTable を再初期化できません。

このテーブルの DataTables オブジェクトを取得するには、引数を渡さないか、bRetrieve と bDestroy のドキュメントを参照してください

-- これはおそらく、初期化スクリプトとテーブル ID を 2 倍にしたことが原因だと思います。ただし、テーブル ID を削除すると、すべての並べ替え機能と検索機能が削除され、プレーン テキストのテーブルが表示されます。初期化コード自体はテーブルをデータテーブルにしていないようです...しかし、それは何かを行っているか、そうでなければエラーは発生しません。

これを機能させる方法はありますか？

ありがとう、ディナ

4

1 に答える 1

0

DataTable が最初に初期化されているかどうかを確認してみてください。

$(document).ready(function() { 

  if ( !$.fn.dataTable.isDataTable( "#products" ) ) {

   $('#products').dataTable( {
    "sDom": "<'row-fluid'<'span6'T><'span6'f>r>t<'row-fluid'<'span6'i><'span6'p>>",
    "oTableTools": {
      "sSwfPath": "media/swf/copy_csv_xls_pdf.swf",
      "aButtons": [
        "copy",
        "print",
        {
          "sExtends":    "collection",
          "sButtonText": 'Save <span class="caret" />',
          "aButtons":    [ "csv", "xls", "pdf" ]
        }
      ]
    }
   } );
 }
} );

于 2014-07-22T15:44:53.210 に答える