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。

这可以假设您对delete方法的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
});

你可能需要包装＆lt;％= will_paginate @ items％＆gt;在引号中，我不是百分百肯定。

Answer 2

我决定做一些更简单的事情;每当我从列表中删除一个项目时，我加载了页面上最后一项之后的项目，并将其插入底部。这样，我可以删除我心中的内容，整个页面感觉很活泼。

我必须小心“不再有物品”的情况。

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

will_paginate + ajax删除

2 个答案: