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 调用，并且该项目从列表中消失（<li> 将被 "" 替换）

我的问题在于导航链接。

• 假设我在第一页有第 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
});

您可能必须将 用引号括起来，我不能 100% 确定。

Answer 2

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

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

非常感谢您的回答，Zachary，但这个感觉更正确。