0

我似乎根本无法让 tabletools 在 Rails 中工作。我按照http://railscasts.com/episodes/340-datatables使用 jquery-datatables gem设置数据表的说明进行操作。我是编码新手，所以答案可能很简单，但我根本无法弄清楚。

这是我的applications.js：

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

我的应用程序.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 的加倍。但是，如果我删除表 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 回答