使用ajax更新rails中的表数据

Question

我只有一个视图 index.html.erb，它显示了数据库中的所有员工姓名和所有详细信息。我有一个搜索表单，其中的搜索结果应该在表 tbody 中更新，id 为“content”。我的 index.html.erb 第一次渲染得很好。
这是我的 index.html.erb

//my view index.html.erb
<%= form_for :query, :url => { :controller => "home", :action => "show" }, :html =>{:id => "search_form"} do |f|%>
    <div>
        <p>Enter the search keywords:</p>
        <input type="text" id="query_search_key" name="query[search_key]"/>

        <%= f.submit "Search" %>
        <p>Raised By : <select style="width:300px" id="query_raised_by" name="query[raised_by]">
        <option value="-1" selected>Select member</option>
        <% @m_n.each do |m_n| %>
        <option value="<%= m_n.full_name %>"><%= m_n.full_name %></option>
        <% end %>
        </select>
    </div>
<% end %>

<div>
<table id="table" class="display">
    <thead>
    <tr><th>Sr Number</th><th>Raised By</th><th>Title</th></tr>
    </thead>
    <tbody id="content">
        <% if @query%>      
            <% @query.each do |query| %>
                <tr><td><%= query.sr_number %></td><td><%= query.from %></td><td><%= query.title %></td></tr>
            <% end %>
        <% end %>
    </tbody>
</table>
</div>

//ajax call handler in index.html.erb
$("#search_form").submit(function(){
    var dataSet = $(this).serialize();
    $.ajax({
        type: "POST",
        url: $(this).attr("action"),
        data: dataSet,
        success: function(data){
        //update the contents of tbody with id content
        }
    });
    return false;
});

这是我的控制器

//my controller
class HomeController <  ActionController::Base
  def index

    @m_n = (db query getting member names)
    #displaying al records
    @query = (db query)
  end

  def show
    #displaying filtered results
    @query = (db query)
    flash[:notice] = "success: "+ no_of_results + " were found"
    render :partial => 'search'

  end
end

从显示操作中，我只想使用@query 对象更新 index.html.erb 中 id 为“content”的表 tbody。

Answer 1

尝试写一些partial并将部分数据添加到tbody

例如：

控制者：

def show
    #displaying filtered results
    @query = (db query)
    #pass @query to index.html.erb and update only the tbody with id=content which takes @query
    render :partial => 'show_partial'

  end

_show_partial.html.erb：

<% if @query%>      
      <% @query.each do |query| %>
          <tr><td><%= query.sr_number %></td><td><%= query.from %></td><td><%= query.title %></td></tr>
      <% end %>
<% end %>

然后

//ajax call handler in index.html.erb
$("#search_form").submit(function(){
    var dataSet = $(this).serialize();
    $.ajax({
        type: "POST",
        url: $(this).attr("action"),
        data: dataSet,
        success: function(data){
              $('#content').html(data)
        }
    });
    return false;
});

我认为它可以解决你的问题