Question

我已经为我们的网站添加了一个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（）调用，所以我可以将寻呼机应用于所有带有'paged'类的元素），/和/它有一个可覆盖的方法来实现我的自定义行为。

我在Javascript中不够熟练（或耐心）去自己开发它，即使它应该很容易。我在一些代码行上挣扎了一整天，而JS总的来说只会让我感到沮丧。但有人必须这样做，:(。## Heading ##

Answer 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>

jQuery分页插件，适用于奇怪的页面结构

1 个答案: