List.js 分页功能详解：从基础使用到高级配置

List.js 分页功能详解：从基础使用到高级配置

list.js The perfect library for adding search, sort, filters and flexibility to tables, lists and various HTML elements. Built to be invisible and work on existing HTML. 项目地址: https://gitcode.com/gh_mirrors/li/list.js

分页功能概述

在现代Web应用中，分页是处理大量数据的常见需求。List.js内置的分页功能提供了一种简洁而强大的方式来实现数据分页展示。从1.5.0版本开始，分页功能已直接集成到核心库中，不再作为独立插件存在。

基础使用方法

要启用List.js的分页功能，只需在初始化配置中设置pagination: true，并指定每页显示的项目数page：

var options = {
  valueNames: ['name', 'category'],
  page: 3,  // 每页显示3个项目
  pagination: true
};

var listObj = new List('listId', options);

HTML结构需要包含一个用于显示分页的ul元素，默认类名为pagination：

<div id="listId">
  <ul class="list">
    <!-- 项目列表 -->
  </ul>
  <ul class="pagination"></ul>
</div>

分页配置选项详解

List.js提供了丰富的分页配置选项，可以满足各种分页需求：

1. 分页容器类名 (paginationClass)

• 类型：String
• 默认值："pagination"
• 说明：指定包含分页链接的ul元素的类名

2. 内部分页窗口 (innerWindow)

• 类型：Int
• 默认值：2
• 说明：控制当前页两侧显示的直接可见页码数量
• 示例：
  • innerWindow: 2 → ... 3 4 [5] 6 7 ...
  • innerWindow: 1 → ... 4 [5] 6 ...

3. 外部分页窗口 (outerWindow)

• 类型：Int
• 默认值：0
• 说明：控制分页开头和结尾显示的直接可见页码数量
• 示例：
  • outerWindow: 0 → ... 3 4 [5] 6 7 ...
  • outerWindow: 2 → 1 2 ... 4 5 [6] 7 8 ... 11 12

4. 左侧外部分页 (left)

• 类型：Int
• 默认值：0
• 说明：仅控制分页开头显示的直接可见页码数量

5. 右侧外部分页 (right)

• 类型：Int
• 默认值：0
• 说明：仅控制分页结尾显示的直接可见页码数量

6. 分页项模板 (item)

• 类型：String
• 默认值：<li><a class='page' href='#'></a></li>
• 说明：自定义分页项的HTML模板

高级用法：双分页控制

List.js支持在同一个列表上使用多个分页控制器，这在需要同时显示顶部和底部分页时非常有用：

var listOptions = {
  valueNames: ['name', 'category'],
  page: 3,
  pagination: [{
    name: "paginationTop",
    paginationClass: "paginationTop",
    outerWindow: 2
  }, {
    paginationClass: "paginationBottom",
    innerWindow: 3,
    left: 2,
    right: 4
  }]
};

对应的HTML结构：

<div id="listId">
  <ul class="paginationTop"></ul>
  <ul class="list">
    <!-- 项目列表 -->
  </ul>
  <ul class="paginationBottom"></ul>
</div>

分页实现原理

List.js的分页功能通过以下步骤工作：

1. 计算总页数：基于项目总数和每页项目数
2. 生成分页链接：根据配置选项确定显示的页码范围
3. 处理点击事件：当用户点击页码时，更新显示的项目范围
4. 保持同步：所有分页控制器保持同步，点击任一控制器都会更新列表

最佳实践建议

1. 合理设置每页项目数：根据项目内容和页面布局选择合适的page值
2. 优化分页显示：使用innerWindow和outerWindow平衡分页控件的可用性和简洁性
3. 自定义样式：通过CSS为分页链接添加样式，提高用户体验
4. 响应式考虑：在移动设备上可能需要减少显示的页码数量

通过合理配置List.js的分页功能，开发者可以轻松实现既美观又实用的数据分页展示效果。

list.js The perfect library for adding search, sort, filters and flexibility to tables, lists and various HTML elements. Built to be invisible and work on existing HTML. 项目地址: https://gitcode.com/gh_mirrors/li/list.js