分页是任何网页上最常用和最基本的功能之一。它为用户提供了一种在大型数据集中导航的方式。

本页将介绍一个全新的jQuery分页插件，它可以无缝地添加到列表、表、div和许多其他类型的HTML元素中。

更多功能：

• 分页样式可以使用CSS进行完全自定义，以适合您的设计风格。
• 每页要显示的自定义项目数。
• 自定义可见页面数。
• 您可以控制每个分页控件的可见性。
• 多种语言。
• 还有更多。

参见：

• JavaScript中的10个最佳分页组件

如何使用它:

1.加载所需的jquery-示例分页-插件.jsjQuery之后的脚本。

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/jquery-simple-pagination-plugin.js"></script>

2.在包含大量需要分页的元素的容器上初始化插件。

<div id="container">
  <table>
    <tbody>
      <tr><td>One</td></tr>
      <tr><td>Two</td></tr>
      <tr><td>Three</td></tr>
      ...
    </tbody>
  </table>
</div>

$('#container').simplePagination();

3.默认情况下，此插件将自动应用于大型HTML表。您可以通过修改分页_容器参数

$('#container').simplePagination({
  pagination_container: 'li',
});

4.指定每页要显示的项目数。默认值：25。

$('#container').simplePagination({
  items_per_page: 25,
});

5.将您自己的样式应用于分页链接和控件。

.simple-pagination-page-x-of-x {
  ...
}

simple-pagination-showing-x-of-x {
  ...
}

simple-pagination-items-per-page {
  ...
}

simple-pagination-select-specific-page {
  ...
}

simple-pagination-page-numbers a  {
  ...
}

6.所有默认插件选项。初始化插件时，可以通过将对象文字传递给简单分页（）方法

$('#container').simplePagination({

  pagination_container: 'tbody',
  html_prefix: 'simple-pagination',

  // button, span, div, et cetera
  navigation_element: 'a',
  items_per_page: 25,
  number_of_visible_page_numbers: 5,

  // enable/disable controls here
  use_page_numbers: true,
  use_first: true,
  use_previous: true,
  use_next: true,
  use_last: true,
  use_page_x_of_x: true,
  use_page_count: false,
  use_showing_x_of_x: true,
  use_item_count: false,
  use_items_per_page: true,
  use_specific_page_list: true,

  // localize the pagination control
  first_content: 'First',
  previous_content: 'Previous',
  next_content: 'Next',
  last_content: 'Last', 
  page_x_of_x_content: 'Page',
  showing_x_of_x_content: 'Showing',

  items_per_page_content: {
    'Five': 5,
    'Ten': 10,
    'Twenty-five': 25,
    'Fifty': 50,
    'One hundred': 100
  },

  thousands_separator: ','
  
});

预览截图

简单通用 jQuery分页插件 Simple Pagination.js