代码之家 › 专栏 › 技术社区 › cthulhu

使用奇数页结构的jQuery分页插件

pagination jquery javascript

cthulhu · 技术社区 · 15 年前

所以,我出去寻找另一个寻呼机插件,但是我找到的所有插件都不能处理我的特定用例。

我的用例如下。我有一组作为列的列表。在第一页,我想看看这两列的前两个列表元素。

<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子选择器,jquery显示ul的第一个和第二个li元素。(如果要查找代码: http://pastebin.com/F7BqQaxh )

我对Javascript还不够精通(或耐心),无法独立开发它,尽管这应该很容易。我花了一整天的时间在少数几行代码上苦苦挣扎,而JS总的来说让我非常沮丧。但总得有人去做:(。###标题)##

1 回复 | 直到 15 年前

Michael Merchant 15 年前

这个 pajinate

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

推荐文章

Elaine Byene · 搜索仅在Angular 17中的当前页面上工作

2 年前

Tilly · 分页在转到第1页时会导致错误,但没有问题

2 年前

Dante · 在使用id和timestamp的游标分页中,我们是否需要id和timestamp来获得下一个页面?

2 年前