数据表导轨问题答案

【问题标题】：Datatable rails issue数据表导轨问题
【发布时间】：2014-02-22 04:57:35
【问题描述】：

我有使用数据表的 Rails 应用程序。我正在使用 jquery-datatables-rails gem。

我有一个 index.html.erb，看起来像：

<table id='products' class="display" data-source="<%= store_products_path(format: "json") %>">
  <thead>
    <tr>
      <th>Store Id</th>
      <th>Created At</th>
      <th>Updated At</th>
    </tr>
  </thead>
  <tbody>

  </tbody>
</table>

我有一个如下所示的产品控制器：

@products = Product.all
respond_to do |format|
    format.html
    format.json do
      render :json=> {
        "sEcho"               => params[:sEcho].to_i,
        "iTotalRecords"       => @products.count,
        "iTotalDisplayRecords"=> @products.count,
        "aaData"              => @products.as_json(
          :only => [:store_id, :created_at, :updated_at]
        )
      }
    end
  end

返回以下 json：

{"sEcho":0,"iTotalRecords":2,"iTotalDisplayRecords":2,"aaData":[{"store_id":128,"created_at":"2014-02-19T04:30:43.455Z","updated_at":"2014-02-19T04:30:43.455Z"},{"store_id":128,"created_at":"2014-02-22T04:39:08.708Z","updated_at":"2014-02-22T04:39:08.708Z"}]}

我还有一个 products.js 文件：

jQuery(function() {
   return $('#products').dataTable({
     sPaginationType: "full_numbers",
     bJQueryUI: true,
     bProcessing: true,
     bServerSide: true,
     sAjaxSource: $('#products').data('source')
   });
});

数据表正在显示，但在加载后会弹出一个警报弹出窗口，上面写着： DataTables 警告（表 id = 'products'）：从第 0 行的数据源请求未知参数“0”

我该如何解决这个问题？感谢大家的帮助！

【问题讨论】：

标签： javascript jquery ruby-on-rails ruby datatable

【解决方案1】：

<table id='products' class="display" data-source="<%= store_products_path(format: "json") %>">
  <thead>
    <tr>
      <th data-column='store_id'>Store Id</th>
      <th data-column='created_at'>Created At</th>
      <th data-column='updated_at'>Updated At</th>
    </tr>
  </thead>
  <tbody>

  </tbody>
</table>


jQuery(function() {
   columns = []
   $('#products').find('thead tr th').each(function(i, th){
     columns.push({mData: $(th).data('column')})
   });
   return $('#products').dataTable({
     sPaginationType: "full_numbers",
     bJQueryUI: true,
     bProcessing: true,
     bServerSide: true,
     aoColumns: columns,
     sAjaxSource: $('#products').data('source')
   });
});

【讨论】：