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

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

心靈之曲

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

原创

814人浏览过

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 行数据，可以这样做：

LOVESTUdio多校园网络店铺

主要更新介绍：完美整合Discuz!论坛，实现一站式登陆、退出、注册；同步所有会员资料；新增购物车功能，商品购买更加方便、快捷；新增部分快捷菜单，网站访问更加方便；限制首页商品、店铺标题显示长度；修正会员后台管理不能更改密码的错误；完善商品显示页面所有功能链接；修正后台标签管理部分错误；修正前台学校列表不按后台顺序显示的错误；修正搜索功能中学校名称过长导致显示紊乱的现象；修正

查看详情

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


    {#each $table.getHeaderGroups() as headerGroup}
      
        {#each headerGroup.headers as header}
          
        {/each}
      
    {/each}
  
    {#each $table.getRowModel().rows as row}
      
        {#each row.getVisibleCells() as cell}
          
        {/each}
      
    {/each}
  
  {header.column.columnDef.header}
  {cell.getValue()}


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

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


  Page {$table.getState().pagination.pageIndex + 1} of {$table.getPageCount()}