will_paginate + ajax删除

Question

我有一个资源列表，使用 will_paginate 显示在分页列表上。

我没有定制任何东西，这是我的观点：

<ul>
<%= render :partial => "item_li", :collection => @items%>
</ul>
<%= will_paginate @items %>

项目在控制器上是这样计算的：

@items = Item.find(:all)

生成的代码是一个简单的 html 列表，底部有分页导航链接：

<ul>
<li>Item 1</li>
<li>Item 2</li>
...
<li>Item 10</li>
</ul>
<div class="pagination">
  <span class="disabled prev_page">Previous</span>
  <span class="current">1</span>
  ...
</div>

我在我的项目上包含了一个“删除”按钮。当按下该链接时，会对服务器进行 ajax 调用，并且该项目从列表中消失（

将被 "" 替换）

我的问题来了与导航链接。

• 假设我在第一页上有项目 1 到 10，在第二页上有项目 11 到 20，等等。
• 假设我删除了第一页上的项目 1、2 和 3。
• 然后我按“下一步”。

服务器将“重新计算”项目列表；由于我删除了前面列表中的 3 个，因此它将返回第 13 至 22 项。换句话说，第 10、11 和 12 项不会出现在第一页或第二页上。

我怎样才能以简单、优雅的方式解决这个问题？

到目前为止，我能找到的唯一解决方案是在每次删除后重新加载整个页面，但是使用 ajax 就变得毫无意义了。

多谢。

Answer 1

根据您的 AJAX 库，您需要实现一个回调方法，每当 AJAX 调用成功完成时就会调用该方法。

首先，将 <%= will_paginate @items %> 放入 div 或某种容器中。然后，在“成功”回调中，删除该 div 并将其替换为包含对 will_paginate @items 的新调用的新 div。

假设您对删除方法的 AJAX 调用重新加载了 @items 变量，则此操作有效。

如果您使用 jQuery，它看起来像这样（假设您为保存分页的 div 提供了一个名为“my_pagination”的类：

$.ajaxSuccess(function(){
  $(".my_pagination").text("");//Cleans out the div
  $(".my_pagination").append(<%=will_paginate @items%>);//Refill the div with a new pagination
});

您可能必须将 <%=will_paginate @items%> 用引号括起来，我不是100%确定。

Answer 2

我决定做一些简单一点的事情；每当我从列表中删除一个项目时，我都会加载页面上最后一个项目之后的项目，并将其插入到底部。这样我就可以随心所欲地删除了，而且整个页面感觉很清爽。

我只需要小心“没有更多物品”的情况。

非常感谢您的回答，扎卡里，但这感觉更正确。