Rails 4 + datatables：並べ替え/検索は機能しません

Question

jQueryのデータテーブルを自分のウェブサイトで動作させようとしていますが、Rails 4で機能するようにはできません。列をソートしようとするとエラーが発生します：jquery.dataTables.self-770bf6f….js?body=1:2525 Uncaught TypeError: Cannot set property 'data' of nullここで

は、私がこれまで持っているものです。

index.html.erb

products_controller.rb

class ProductsController < ApplicationController 
    before_action :set_product, only: [:show, :edit, :update, :destroy] 

    # GET /products 
    # GET /products.json 
    def index 
     respond_to do |format| 
      format.html 
      format.json { render json: ProductsDatatable.new(view_context) } 
     end 
    end 

    # GET /products/1 
    # GET /products/1.json 
    def show 
    end 

    # GET /products/new 
    def new 
    @product = Product.new 
    end 

    # GET /products/1/edit 
    def edit 
    end 

    # POST /products 
    # POST /products.json 
    def create 
    @product = Product.new(product_params) 

    respond_to do |format| 
     if @product.save 
     format.html { redirect_to @product, notice: 'Product was successfully created.' } 
     format.json { render :show, status: :created, location: @product } 
     else 
     format.html { render :new } 
     format.json { render json: @product.errors, status: :unprocessable_entity } 
     end 
    end 
    end 

    # PATCH/PUT /products/1 
    # PATCH/PUT /products/1.json 
    def update 
    respond_to do |format| 
     if @product.update(product_params) 
     format.html { redirect_to @product, notice: 'Product was successfully updated.' } 
     format.json { render :show, status: :ok, location: @product } 
     else 
     format.html { render :edit } 
     format.json { render json: @product.errors, status: :unprocessable_entity } 
     end 
    end 
    end 

    # DELETE /products/1 
    # DELETE /products/1.json 
    def destroy 
    @product.destroy 
    respond_to do |format| 
     format.html { redirect_to products_url, notice: 'Product was successfully destroyed.' } 
     format.json { head :no_content } 
    end 
    end 

    private 
    # Use callbacks to share common setup or constraints between actions. 
    def set_product 
     @product = Product.find(params[:id]) 
    end 

    # Never trust parameters from the scary internet, only allow the white list through. 
    def product_params 
     params.require(:product).permit(:name, :category, :price) 
    end 
end 

<table id="products" data-source="<%= products_url(format: "json") %>"> <thead> <tr> <th>Name</th> <th>Category</th> <th>Price</th> </tr> </thead> <tbody> </tbody> </table> 

products.coffee

jQuery -> 
    $('#products').DataTable 
    "Processing": true 
    "serverSide": true 
    "Ajax": $('#products').data('source') 

product_datatable.rb

class ProductsDatatable 
    delegate :params, :link_to, :number_to_currency, to: :@view 

    def initialize(view) 
    @view = view 
    end 

    def as_json(options = {}) 
    { 
     sEcho: params[:sEcho].to_i, 
     iTotalRecords: Product.count, 
     iTotalDisplayRecords: products.total_entries, 
     aaData: data 
    } 
    end 

private 

    def data 
    products.map do |product| 
     [ 
     product.name, 
     product.category, 
     product.price 
     ] 
    end 
    end 

    def products 
    @products ||= fetch_products 
    end 

    def fetch_products 
    products = Product.order("#{sort_column} #{sort_direction}") 
    products = products.page(page).per_page(per_page) 
    if params[:sSearch].present? 
     products = products.where("name like :search or category like :search", search: "%#{params[:sSearch]}%") 
    end 
    products 
    end 

    def page 
    params[:iDisplayStart].to_i/per_page + 1 
    end 

    def per_page 
    params[:iDisplayLength].to_i > 0 ? params[:iDisplayLength].to_i : 10 
    end 

    def sort_column 
#  columns = [Drug.name, Drug.category, Drug.price] 
#  byebug 
     columns = %w[name category price] 
    columns[params[:iSortCol_0].to_i] 
    end 

    def sort_direction 
    params[:sSortDir_0] == "desc" ? "desc" : "asc" 
    end 
end 

Answer 1

私はRailsCasts第340位に次のように編集してアップカムかなりの時間のために苦労した後。

jQueryの重要な

$(document).on("page:change", function() { 
    $('#products').DataTable({ 
    "Processing": true, 
    "serverSide": true, 
    "ajax": { 
      url : $('#products').data('source'), 
      type: "get" 
     } 
    }); 
}); 

と詳細.. product_datatable.rb

def sort_column 
    columns = %w[name category price] 
# columns[params[:iSortCol_0].to_i] <-- used in video 
    columns[params[:order]["0"]["column"].to_i] #<-- works in Rails 4 
end 

def sort_direction 
    params[:order]["0"]["dir"] #<-- works in Rails 4 
# params[:sSortDir_0] == "desc" ? "desc" : "asc" <-- used in video 
end 

def fetch_products 
    products = Product.order("#{sort_column} #{sort_direction}") 
    products = products.page(page).per_page(per_page) 
    if params[:search]["value"] != "" #<-- new 
     products = products.where("name like :search or category like :search", search: "%#{params[:search]["value"]}%") #<--- new 
    end 
    products 
end