使用Kaminari分页和Ajax过滤的Rails无限滚动

时间:2014-07-23 15:52:38

标签: jquery ruby-on-rails ajax pagination kaminari

我目前正在Rails 3.2中构建一个电影数据库应用程序。 我有一个索引页面,其中列出了所有电影,这些电影用无限滚动的宝石使用kaminari进行分页。 无限滚动工作正常,现在我已经在ransack gem的帮助下实现了搜索表单。过滤工作正常,通过ajax查询和渲染也是如此。

但是,一旦我显示过滤结果,无限滚动分页就不再起作用了。 在rails控制台中,您可以看到,如果向下滚动筛选结果,它会查询下一个结果,但它不能正确呈现这些结果。

我确信这是一件我想念的小事,但我无法弄清楚是什么,因为我对铁轨有点新鲜。

以下是一些代码:

超时控制的Keyup事件进行 ajax调用

    $('#titleinput').keyup(function(){
    var value = this.value;
    $(this).doTimeout( 'typing', 250, function(){
        $.ajax({
            url: '/films',
            type: 'GET',
            data: {
                "q[title_cont]": value}
        })
    });
});

将搜索查询的get请求发送给 film_controller.rb中的索引操作

 def index
@q = Film.search(params[:q])
unless params[:q].to_s.empty?
  @films = @q.result.page(params[:page]).per(26)
  respond_to do |format|
  format.js {render :partial => 'replace'}
  end
else
  @films = @q.result.page(params[:page]).per(26)
respond_to do |format|
  format.html # index.html.erb
  format.json { render json: @films }
  format.js
end
end
end

渲染 存在搜索查询时 _replace.js.erb partial

$("#films").html("<tbody class='page'><%= escape_javascript(render @films) %></tbody>");

取代 index.html.erb

中的当前#films表
<%= javascript_include_tag "application" %>
<div class="headline">
  <h1>film listing</h1>
  <%= search_form_for(@q) do |f| %>
      <%= f.search_field :title_cont, {id: 'titleinput'} %>
  <%= f.submit %>
      <% end %>
</div>
<div class="content">
  <table id="films">
    <tbody class="page">
    <%= render @films %>
    </tbody>
  </table>
</div>

<%= paginate @films %>

特定电影通过 _film.html.erb 部分呈现:

<% if cycle('odd', 'even') == 'odd' %>
    <tr onclick="location.href='<%= film_path(film) %>'" class="trodd film">
<% else %>
    <tr onclick="location.href='<%= film_path(film) %>'" class="treven film">
<% end %>
<td class="title"><%= film.title %></td>
<td class="dire">by     <%= film.get_realname_director %></td>
<td class="actr">starring     <%= film.get_realname_actor %></td>

我非常感谢任何帮助,提前谢谢!

0 个答案:

没有答案