使用 jQuery 过滤无序列表并创建分页

Question

我是新来的，所以当我要求你具体回答时，请原谅我。谢谢！

我正在一个网站上工作，我有一个无序列表的人员列表，这些人员的类别定义了他们是谁（即艺人、政治家等）。

在顶部，我选择了一些过滤器，您可以使用这些过滤器来缩小使用这些类的结果范围。当您单击过滤器时，它实际上会隐藏所有列表项，但您选择的类别的列表项除外。当然，还有一个显示所有文本的“全部”按钮。

也就是说，我也正在使用 pajinate.js 来进行分页。

问题是，当我使用过滤器时，分页不会更新以反映被过滤掉的内容。

有什么建议吗？是否有另一个我不知道的支持内置过滤的分页插件？

-j

Answer 1

我假设您正在使用此页面中的 pajinate.js：http://github.com/wesnolte/Pajinate

看起来 pajinate 并不关心列表项的类是什么，所以当用户隐藏类时它不会改变分页。

为了使其与 pajinate.js 一起使用，我建议您可以使用另一个未嵌套在 page_container div 中的无序列表，用于“存储”过滤后的项目。本质上，当用户选择过滤器时，您将使用 appendTo() 和 remove() 函数对要隐藏/显示的元素集将所有过滤后的项目从内容 ul 移动到隐藏的 ul。移动列表项后，您可能还需要调用 page_container div 上的 pajinate() 函数。

希望其他人有更简单的解决方案！