4

从 ajax 和 jquery 与 rails 结合开始，我试图在我的用户索引页面底部创建一个“加载更多”链接。我的用户索引页面应该显示前 10 个用户，然后单击它在用户 div 底部加载下一个 10 个用户的链接，等等。我使用 Kaminari 进行分页。

我从以下代码开始：

用户控制器.rb

def index
  @users = User.page(params[:page]).per(10)
end

用户/index.html.erb

<div id="users">
  <%= render :partial => @users %>
</div>
<%= link_to "Load more", "#", :class => "next" %>

_user.html.erb

<div id="box">
  <%= link_to full_name(user), user %>
</div>

应用程序.js

我发现这个片段（信用：here）试图满足我的需要：

function loadMore(pageNo) {
  var url = '/users?page=';
  $.get(url + pageNo, function(response) {
    $("#users").append(response);
  });
}

$(document).ready(function() {
  var currPage = 1;
  $("a.next").click(function() {
    loadMore(++currPage);
  });
});

我工作得很好，除了它加载所有页面布局和下一个结果不仅是我的 _user 部分中的框 div 我该 如何管理这个？我是否必须创建一个 index.js.erb （类似于：page.insert_html :bottom, :users, :partial => @users 但在 jquery 中，如果是这样，我该怎么做）？

谢谢你的帮助

4

2 回答 2

9

您不需要为它创建另一个操作。我会使用不显眼的javascript。尝试这样的事情：

用户控制器.rb

您不需要在这里更改任何内容，只需确保控制器响应 js

respond_to :html, :js

用户/index.html.erb

<div id="users">
  <%= render :partial => @users %>
</div>
<%= link_to_next_page @users, 'Load More', :remote => true, :id=>"load_more_link" %>
<%###  link_to_next_page is a Kaminari function that returns exactly what the name implies %>

用户/index.js.erb

$('#users').append("<%= escape_javascript(render :partial => @users)%>");
$('#load_more_link').replaceWith("<%= escape_javascript(link_to_next_page(@users, 'Load More', :remote => true, :id=>'load_more_link'))%>");

这应该是让它工作所需要的一切。当然，您可以添加一些 javascript 在单击链接或其他任何内容时插入加载图标。注意：我还没有测试过这个确切的实现，所以可能会有一些错误，但你应该能够明白这个想法

于 2012-07-10T00:40:29.697 回答
3

您应该为此创建一个自己的操作，与它自己的视图相关联。然后，一定要禁用布局的渲染：

def more_users
  @users = User.page(params[:page]).per(10)
  render :layout => false
end
于 2011-04-05T05:37:53.483 回答