TanStack Svelte Table 实现分页功能的完整指南-js教程-PHP中文网

TanStack Svelte Table 实现分页功能的完整指南

心靈之曲

发布： 2025-07-15 17:02:13

原创

809人浏览过

tanstack svelte table 实现分页功能的完整指南

本文档旨在指导开发者如何在 TanStack Svelte Table 中实现分页功能。通过引入 getPaginationRowModel 并配置相关选项，你可以轻松地为你的表格添加分页控制，提升用户体验。本文将提供详细的代码示例和步骤，帮助你快速上手。

TanStack Table 是一个功能强大的无头表格库，它提供了构建灵活且高性能表格所需的所有工具。虽然它本身不提供 UI 组件，但它允许你使用自己喜欢的 UI 框架（如 Svelte）来构建表格界面。本教程将重点介绍如何在 Svelte 中使用 TanStack Table 实现分页功能。

步骤 1: 引入必要的模块

首先，你需要从 @tanstack/svelte-table 导入 getPaginationRowModel。这个函数是一个行模型，它负责根据当前页码和页面大小来过滤表格数据。

<script>
import {
  // ... 其他导入
  getPaginationRowModel,
} from '@tanstack/svelte-table';
</script>

登录后复制

步骤 2: 配置表格选项

接下来，在你的表格选项中启用 getPaginationRowModel。同时，建议启用 autoResetPageIndex 选项，这样当数据或页面大小更改时，页码会自动重置，避免出现超出页码范围的问题。

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

const options = writable({
  // ... 其他选项
  getPaginationRowModel: getPaginationRowModel(),
  autoResetPageIndex: true,
});
</script>

登录后复制

步骤 3: 设置初始页面大小

使用 $table.setPageSize() 方法设置表格的初始页面大小。例如，要设置每页显示 10 行数据，可以这样做：

ViiTor实时翻译

AI实时多语言翻译专家！强大的语音识别、AR翻译功能。

116

查看详情

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

const options = writable({
  // ... 其他选项
  getPaginationRowModel: getPaginationRowModel(),
  autoResetPageIndex: true,
});

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

登录后复制

步骤 4: 添加分页控制按钮

最后，你需要添加按钮来控制页码。使用 $table.previousPage() 和 $table.nextPage() 方法来切换到上一页和下一页。使用 $table.getCanPreviousPage() 和 $table.getCanNextPage() 方法来禁用按钮，防止用户超出页码范围。

<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 { writable } from 'svelte/store';
  import {
    getCoreRowModel,
    getPaginationRowModel,
    useSvelteTable,
  } from '@tanstack/svelte-table';

  const data = writable([
    { firstName: 'John', lastName: 'Doe', age: 30 },
    { firstName: 'Jane', lastName: 'Smith', age: 25 },
    { firstName: 'Peter', lastName: 'Jones', age: 40 },
    { firstName: 'Alice', lastName: 'Brown', age: 28 },
    { firstName: 'Bob', lastName: 'Davis', age: 35 },
    { firstName: 'Emily', lastName: 'Wilson', age: 22 },
    { firstName: 'David', lastName: 'Garcia', age: 45 },
    { firstName: 'Olivia', lastName: 'Rodriguez', age: 29 },
    { firstName: 'Michael', lastName: 'Martinez', age: 32 },
    { firstName: 'Sophia', lastName: 'Hernandez', age: 26 },
    { firstName: 'Daniel', lastName: 'Lopez', age: 38 },
    { firstName: 'Isabella', lastName: 'Gonzalez', age: 24 },
    { firstName: 'Matthew', lastName: 'Perez', age: 31 },
    { firstName: 'Mia', lastName: 'Sanchez', age: 27 },
    { firstName: 'Andrew', lastName: 'Ramirez', age: 34 },
  ]);

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

  const options = writable({
    data: $data,
    columns: $columns,
    getCoreRowModel: getCoreRowModel(),
    getPaginationRowModel: getPaginationRowModel(),
    autoResetPageIndex: true,
  });

  const table = useSvelteTable(options);
  const $table = writable($table);

  $table.setPageSize(5);
</script>

<table>
  <thead>
    {#each $table.getHeaderGroups() as headerGroup}
      <tr>
        {#each headerGroup.headers as header}
          <th>{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>

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

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

<div>
  Page {$table.getState().pagination.pageIndex + 1} of {$table.getPageCount()}
</div>

登录后复制

注意事项

确保你已经安装了 @tanstack/svelte-table。
根据你的项目需求调整页面大小和样式。
可以添加更多分页控制元素，例如页面大小选择器或直接输入页码。

总结

通过本教程，你学习了如何在 TanStack Svelte Table 中实现分页功能。通过简单的几步配置，你可以为你的表格添加分页控制，提升用户体验。希望本教程对你有所帮助！

以上就是TanStack Svelte Table 实现分页功能的完整指南的详细内容，更多请关注php中文网其它相关文章！