jQuery 分页插件，适用于奇怪的~ish 页面结构答案

【问题标题】：jQuery paging plugin that works with odd~ish page structurejQuery 分页插件，适用于奇怪的~ish 页面结构
【发布时间】：2010-12-21 15:13:50
【问题描述】：

我已经向我们的网站添加了一个 jQuery 插件，该插件目前可以正常工作，但是当页面上有两个元素需要分页时它会中断。我已经向插件的开发者询问了这个问题，他确认它的设计只有一个页面上的元素。

所以，我出去寻找另一个寻呼机插件，但我发现的所有插件都无法处理我的特定用例。

我的用例如下。我有一组充当列的列表。在第一页，我想查看两列的前两个列表元素。

<div>
  <ul class="column-1">
    <li>
    <li>
    <li>
    <li>
  </ul>
  <ul class="column-2">
    <li>
    <li>
    <li>
    <li>
  </ul>
</div>

在当前的寻呼机中，我通过计算列的数量并将常规的开始/结束除以它们来实现这一点，因此不是显示记录 1 - 4，而是显示 1 - 2。使用 :nth-child 选择器, jquery 然后显示任一 ul 的第一个和第二个 li 元素。（如果您正在寻找代码：http://pastebin.com/F7BqQaxh）

这是可能的，因为我使用的特定 jquery 插件使用可自定义的回调函数在用户单击页码时执行。但是，当页面上有多个元素时，这不起作用，因为回调函数不知道点击了两个寻呼机元素中的哪一个 - 或者我只是缺少一些基本的东西。

所以。我想我正在寻找一个简单的寻呼机插件，该插件可与同一页面上的多个元素一起使用（并且应该与 .each() 调用一起使用，因此我可以将寻呼机应用于具有“分页”类的所有元素），/和/ 有一个可覆盖的方法来实现我的自定义行为。

我在 Javascript 方面还不够精通（或耐心），无法自行开发它，尽管它应该很容易。我在几行代码上挣扎了一整天，而 JS 总的来说让我感到沮丧。但总得有人这样做，:(.## Heading ##

【问题讨论】：

标签： javascript jquery pagination

【解决方案1】：

pajinate 插件可以满足您的需求。您可以定义它应该坐的 div 并毫无问题地调用它：

<script type="text/javascript">
$(function(){
  $(".pajinate").pajinate({
    item_container_id:'.pajinate-content', 
    nav_panel_id:'.navigation',
    items_per_page:3,
  });
});
</script>
<div>
  <div id="pajinate1" class="pajinate">
    <div class="navigation"></div>
    <ul class="column-1 pajinate-content">
      <li>a</li>
      <li>b</li>
      <li>c</li>
      <li>d</li>
      <li>e</li>
      <li>f</li>
      <li>g</li>
      <li>h</li>
      <li>i</li>
      <li>j</li>
      <li>k</li>
      <li>l</li>
    </ul>
  </div>
  <div id="pajinate2" class="pajinate">
    <div class="navigation"></div>
    <ul class="column-2 pajinate-content">
      <li>a</li>
      <li>b</li>
      <li>c</li>
      <li>d</li>
      <li>e</li>
      <li>f</li>
      <li>g</li>
      <li>h</li>
      <li>i</li>
      <li>j</li>
      <li>k</li>
      <li>l</li>
    </ul>
  </div>
</div>

【讨论】：