Rails 3/Kaminari/JQuery-加载更多按钮：显示结果的问题（它加载整个页面布局，而不仅仅是部分布局）

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

我从以下代码开始：

用户_controller.rb User/index.html.erb 我的工作非常完美，除了加载所有页面布局，下一个结果不仅是我的用户部分中的box div 我该怎么办？我是否必须创建index.js.erb（类似于：page.insert_html:bottom，：users，：partial=>@users，但在jquery中，如果是这样，我该怎么做）

---

感谢您的帮助

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

def more_users
  @users = User.page(params[:page]).per(10)
  render :layout => false
end

---

您不需要为它创建另一个操作。我会使用不引人注目的javascript。试着这样做：

---

User\u controller.rb

<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 %>

$('#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'))%>");

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

User/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 %>

$('#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'))%>");

@用户%>
true，：id=>“加载更多链接”%>

User/index.js.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 %>

$('#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'))%>");

$（'#users'）。追加（@users）%>”；
$（“#加载更多链接”）。替换为（“true，：id=>“加载更多链接”）%>；

---

---

这应该是让它工作所需要的全部。当然，您可以添加一些javascript，以便在单击链接时插入加载图标。注意：我还没有测试这个精确的实现，所以可能会有一些错误，但是你应该能够得到这个想法

我想你的意思是它再次呈现页面的布局？这是正确的吗？如果是这样，请用这些信息更新你的问题。嗨，Ryan，更新完成：）是的，它会呈现所有布局，不只是用户div partHello

benoitr

，你能帮助我，你是如何解决这个问题的，只加载带有新项目的

div

？我现在正在解决同样的问题，但不知道，怎么办。。。谢谢你嗨，用户705586，我停止了这个项目，但我记得我几乎实现了这个功能。如果我找到代码（我真的有可能删除它），我会在这里发布一个要点。是的，这将是用户控制器中的一个更为复杂的用户操作。我认为，一个简单的匹配路径就可以做到这一点：

match'users/page/：page'=>“users#more_users”

。此操作的视图应仅包含要附加到div的内容。抱歉，我删除了我的评论：）我将尝试此操作。不过，我需要一个布局，它附加在我的div。它会工作吗？非常感谢。我做到了！但现在我面临两个问题：1）我需要显示最小布局（不是整个布局页面，而是类似于：2）我如何在我的users/index.html.erb中显示它，因为more_users.html.erb视图不是局部视图？不确定这是否是最好的方式，但是我认为使用

\u users\u page.html.erb

分部代码（在

index.html.erb

和

更多用户.html.erb

中使用）就可以了。我不确定第一个问题是否正确，但您可以将其添加到

\u users\u page.html.erb

部分或

more\u users.html.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'))%>");