如何在Svelte中结合Carbon Design数据表与分页组件？

我希望在Svelte中使用Carbon Design System实现带有分页页脚的数据表，但无法将分页页脚与数据表关联起来。我尝试了如下代码，分页页脚可以显示，但无论在分页页脚中选择什么选项，数据表都没有变化。

<script>
import { DataTable, DatePicker, DatePickerInput, NumberInput, Grid, Row, Column, Button, FluidForm, Pagination } from "carbon-components-svelte";
</script>
<DataTable 
            sortable
            zebra
            {headers} 
            {rows}> 
</DataTable>
<Pagination totalItems={rows.length} pageSizes={[10, 15, 20]} />

我查阅了Carbon Design System的分页和数据表文档，但没找到明确的关联指引。我遗漏了什么？需要为分页页脚添加哪些属性，才能在修改分页选项时让数据表同步更新视图？

解决方案 #

Carbon的DataTable和Pagination组件不会自动关联，需要你手动维护分页状态并处理数据切片，核心步骤如下：

1. 定义分页状态变量：声明当前页码、每页条数两个变量，用来控制分页逻辑。
2. 绑定分页组件的状态与事件：将状态变量与Pagination组件绑定，同时监听分页变更事件来更新状态。
3. 响应式处理数据切片：根据当前分页状态，对原始数据进行切片，把处理后的结果传给DataTable。

修改后的完整代码示例：

<script>
import { DataTable, Pagination } from "carbon-components-svelte";

// 替换为你的实际表头和完整数据
let headers = [
  { key: 'name', value: '名称' },
  { key: 'age', value: '年龄' }
];
let originalRows = [
  { name: '张三', age: 25 },
  { name: '李四', age: 30 },
  // 更多数据...
];

// 分页状态
let page = 1;
let pageSize = 10;

// 响应式计算当前页数据：状态变化时自动重新切片
$: paginatedRows = originalRows.slice(
  (page - 1) * pageSize,
  page * pageSize
);
</script>

<DataTable 
  sortable
  zebra
  {headers} 
  rows={paginatedRows}> 
</DataTable>

<Pagination 
  totalItems={originalRows.length} 
  pageSizes={[10, 15, 20]}
  bind:page
  bind:pageSize
  on:pageChange={(e) => page = e.detail.page}
  on:pageSizeChange={(e) => {
    pageSize = e.detail.pageSize;
    // 切换每页条数时重置到第一页，避免数据为空
    page = 1;
  }}
/>

关键说明： #

• 使用bind:page和bind:pageSize实现分页组件与状态变量的双向绑定，也可以通过on:pageChange、on:pageSizeChange事件手动更新状态。
• Svelte的$:声明会在依赖的page或pageSize变化时，自动重新计算paginatedRows，DataTable会同步渲染对应页的数据。
• 切换每页条数时重置页码是常规交互逻辑，能避免出现“当前页无数据”的尴尬情况。

内容的提问来源于stack exchange，提问作者DSSO21