如何用TanStack Svelte Table实现分页功能

TanStack Svelte Table是专为Svelte生态设计的无头表格库，本身不提供UI组件，只负责表格的逻辑处理，分页功能需要开发者结合其提供的API自行实现。通过合理的配置和逻辑编写，可以快速为表格添加灵活的分页能力。

分页功能的核心配置

要实现分页，首先需要在创建表格实例时启用分页相关的功能，TanStack Svelte Table提供了pagination功能模块，需要将其添加到表格的功能列表中。

核心的配置参数包括：

• pageSize：每页展示的数据条数，默认可以设置为10、20等常用值
• pageIndex：当前页码，从0开始计数
• manualPagination：是否开启手动分页，如果后端已经做了分页处理，需要设置为true

基础分页实现示例

以下是一个完整的前端分页实现示例，假设我们已经有一组模拟的用户数据，需要将其按每页10条的规则展示。

<script>
  import { createTable } from '@tanstack/svelte-table'
  import { pagination } from '@tanstack/svelte-table/pagination'

  // 模拟用户数据
  const userData = Array.from({ length: 45 }, (_, i) => ({
    id: i + 1,
    name: `用户${i + 1}`,
    age: 20 + Math.floor(Math.random() * 20),
    email: `user${i + 1}@ipipp.com`
  }))

  // 定义表格列
  const columns = [
    {
      header: 'ID',
      accessorKey: 'id'
    },
    {
      header: '姓名',
      accessorKey: 'name'
    },
    {
      header: '年龄',
      accessorKey: 'age'
    },
    {
      header: '邮箱',
      accessorKey: 'email'
    }
  ]

  // 分页相关状态
  let pageSize = 10
  let pageIndex = 0

  // 创建表格实例
  const table = createTable({
    data: userData,
    columns,
    state: {
      pagination: {
        pageSize,
        pageIndex
      }
    },
    onPaginationChange: (updater) => {
      if (typeof updater === 'function') {
        const newState = updater({ pageIndex, pageSize })
        pageIndex = newState.pageIndex
        pageSize = newState.pageSize
      } else {
        pageIndex = updater.pageIndex
        pageSize = updater.pageSize
      }
    },
    // 启用分页功能
    _features: [pagination]
  })

  // 获取当前页的数据
  $: pageCount = Math.ceil(userData.length / pageSize)
  $: currentPageData = userData.slice(pageIndex * pageSize, (pageIndex + 1) * pageSize)
</script>

<div class="table-container">
  <table>
    <thead>
      {#each $table.getHeaderGroups() as headerGroup}
        <tr>
          {#each headerGroup.headers as header}
            <th>{header.renderHeader()}</th>
          {/each}
        </tr>
      {/each}
    </thead>
    <tbody>
      {#each currentPageData as row}
        <tr>
          {#each $table.getVisibleFlatColumns() as column}
            <td>{row[column.id]}</td>
          {/each}
        </tr>
      {/each}
    </tbody>
  </table>

  <div class="pagination-controls">
    <button disabled={pageIndex === 0} on:click={() => pageIndex = 0}>首页</button>
    <button disabled={pageIndex === 0} on:click={() => pageIndex = pageIndex - 1}>上一页</button>
    <span>第 {pageIndex + 1} 页 / 共 {pageCount} 页</span>
    <button disabled={pageIndex === pageCount - 1} on:click={() => pageIndex = pageIndex + 1}>下一页</button>
    <button disabled={pageIndex === pageCount - 1} on:click={() => pageIndex = pageCount - 1}>末页</button>
    <select bind:value={pageSize} on:change={() => pageIndex = 0}>
      <option value={5}>每页5条</option>
      <option value={10}>每页10条</option>
      <option value={20}>每页20条</option>
    </select>
  </div>
</div>

<style>
  .table-container {
    margin: 20px;
  }
  table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
  }
  th, td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
  }
  th {
    background-color: #f2f2f2;
  }
  .pagination-controls {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  button:disabled {
    cursor: not-allowed;
    opacity: 0.5;
  }
</style>

后端分页实现要点

如果数据量较大，前端分页会加载全部数据，影响性能，此时需要对接后端分页接口。只需要将manualPagination设置为true，然后手动更新表格的pageCount和当前页数据即可。

核心逻辑调整如下：

• 每次页码或每页条数变化时，调用后端接口获取对应页的数据
• 将后端返回的数据总条数计算为总页数，更新到表格的pageCount状态中
• 将后端返回的当前页数据赋值给表格的data属性

常见问题说明

1. 页码从0开始：TanStack Svelte Table的分页页码默认从0开始，展示时需要注意转换为用户习惯的从1开始显示。

2. 分页状态同步：如果页面有其他操作需要重置分页，只需要将pageIndex设置为0即可。

3. 功能模块引入：一定要确保将pagination模块添加到表格的_features配置中，否则分页相关的API无法使用。

TanStack_Svelte_Table分页功能Svelte表格组件修改时间：2026-06-28 06:06:30