TanStack Svelte Table 实现分页功能详解

TanStack Table 是一个强大的无头表格库，提供了丰富的功能和高度的定制性。尽管官方文档中没有直接的分页示例，但通过一些简单的配置，我们可以在 Svelte 项目中轻松实现分页功能。

实现步骤

1. 引入必要的模块

首先，从 @tanstack/svelte-table 引入 getPaginationRowModel。这个函数将用于创建分页模型，控制表格的行显示。

```javascript
import {
  getPaginationRowModel,
} from '@tanstack/svelte-table';
```

2. 配置表格选项

在 options 中启用分页功能，并将 autoResetPageIndex 设置为 true。autoResetPageIndex 确保在数据或页面大小更改时，分页自动更新，避免出现页面索引超出范围的问题。

```javascript
const options = writable({
  data: yourData,
  columns: yourColumns,
  getPaginationRowModel: getPaginationRowModel(),
  autoResetPageIndex: true,
});
```

3. 设置初始页面大小

使用 $table.setPageSize() 方法设置表格的初始页面大小。例如，设置为每页显示 10 行：

```javascript
$table.setPageSize(10);
```

4. 添加分页控制按钮

在 HTML 中添加 "上一页" 和 "下一页" 按钮，并绑定相应的事件处理函数。$table.previousPage() 和 $table.nextPage() 方法用于切换页面。$table.getCanPreviousPage() 和 $table.getCanNextPage() 方法用于判断是否可以切换到上一页或下一页，并相应地禁用按钮。

CreateWise AI

为播客创作者设计的AI创作工具，AI自动去口癖、提交亮点和生成Show notes、标题等

下载

```html
<button
    on:click={() => $table.previousPage()}
    disabled={!$table.getCanPreviousPage()}
>
  Prev
</button>

<button
    on:click={() => $table.nextPage()}
    disabled={!$table.getCanNextPage()}
>
  Next
</button>
```

完整示例

下面是一个完整的示例，展示了如何在 TanStack Svelte Table 中实现基本的分页功能：

<script>
  import {
    createSvelteTable,
    getPaginationRowModel,
    writable,
  } from '@tanstack/svelte-table';

  // 示例数据
  const data = writable(Array.from({ length: 100 }, (_, i) => ({
    firstName: `firstName_${i}`,
    lastName: `lastName_${i}`,
    age: i,
  })));

  // 列定义
  const columns = writable([
    { header: 'First Name', accessorKey: 'firstName' },
    { header: 'Last Name', accessorKey: 'lastName' },
    { header: 'Age', accessorKey: 'age' },
  ]);

  // 创建表格实例
  const table = createSvelteTable({
    get data() { return $data; },
    get columns() { return $columns; },
    getPaginationRowModel: getPaginationRowModel(),
    autoResetPageIndex: true,
  });

  const $table = writable($table);
  $table.setPageSize(10);
</script>

<table>
  <thead>
    {#each $table.getHeaderGroups() as headerGroup}
      <tr>
        {#each headerGroup.headers as header}
          <th>{header.isPlaceholder ? '' : header.column.columnDef.header}</th>
        {/each}
      </tr>
    {/each}
  </thead>
  <tbody>
    {#each $table.getRowModel().rows as row}
      <tr>
        {#each row.getVisibleCells() as cell}
          <td>{cell.getValue()}</td>
        {/each}
      </tr>
    {/each}
  </tbody>
</table>

<div>
  <button
    on:click={() => $table.previousPage()}
    disabled={!$table.getCanPreviousPage()}
  >
    Prev
  </button>
  <span>
    Page {$table.getState().pagination.pageIndex + 1} of {$table.getPageCount()}
  </span>
  <button
    on:click={() => $table.nextPage()}
    disabled={!$table.getCanNextPage()}
  >
    Next
  </button>
</div>

注意事项

• 确保正确引入 @tanstack/svelte-table 库。
• 根据实际数据结构和需求，调整列定义和页面大小。
• 可以根据需要自定义分页控制按钮的样式和功能。例如，可以添加页面大小选择器，或者直接输入页码跳转。
• 使用 table.getState().pagination.pageIndex 获取当前页码，table.getPageCount() 获取总页数，用于显示分页信息。

总结

通过以上步骤，您可以在 TanStack Svelte Table 中轻松实现分页功能。这种方法简单易懂，并且具有很高的灵活性，可以满足各种不同的分页需求。希望本文档能够帮助您更好地使用 TanStack Table，构建更强大的 Svelte 应用。