SvelteKit后台仪表盘无查询参数实现表格分页方案咨询

核心逻辑是利用SvelteKit的load函数读取表单提交的分页参数，结合use:enhance实现无刷新页面更新，既保持SSR渲染，又不修改URL、不依赖cookie。

1. 修改 +page.server.ts #

在load函数中获取表单提交的分页参数，设置默认值为第一页，再根据参数请求目标接口：

// +page.server.ts
export async function load({ fetch, request }) {
    // 读取表单提交的分页参数，默认第一页
    const formData = await request.formData();
    const postsPage = Number(formData.get('postsPage')) || 1;
    const usersPage = Number(formData.get('usersPage')) || 1;
    const limit = 10; // 每页条数，可按需调整

    // 计算跳过的数据条数
    const postsSkip = (postsPage - 1) * limit;
    const usersSkip = (usersPage - 1) * limit;

    // 带分页参数请求数据（修正原代码中用户接口的错误）
    const postsResponse = await fetch(`https://dummyjson.com/posts?skip=${postsSkip}&limit=${limit}`).then(res => res.json());
    const usersResponse = await fetch(`https://dummyjson.com/users?skip=${usersSkip}&limit=${limit}`).then(res => res.json());

    return {
        posts: postsResponse.posts,
        totalPosts: postsResponse.total,
        users: usersResponse.users,
        totalUsers: usersResponse.total,
        // 返回当前分页值，用于表单回显
        currentPostsPage: postsPage,
        currentUsersPage: usersPage,
        limit
    };
}

2. 修改 +page.svelte #

添加隐藏表单，用use:enhance实现无刷新提交，处理分页切换事件：

<!-- +page.svelte -->
<script>
    import PostsTable from './components/PostsTable.svelte';
    import UsersTable from './components/UsersTable.svelte';
    import { enhance } from '$app/forms';

    export let data;

    // 处理文章分页切换
    const handlePostsPageChanged = (page: number) => {
        const form = document.getElementById('pagination-form');
        if (form) {
            (form.querySelector('[name="postsPage"]') as HTMLInputElement).value = page.toString();
            form.requestSubmit();
        }
    };

    // 处理用户分页切换
    const handleUsersPageChanged = (page: number) => {
        const form = document.getElementById('pagination-form');
        if (form) {
            (form.querySelector('[name="usersPage"]') as HTMLInputElement).value = page.toString();
            form.requestSubmit();
        }
    };
</script>

<!-- 隐藏表单，用于提交分页参数 -->
<form id="pagination-form" method="POST" use:enhance>
    <input type="hidden" name="postsPage" value={data.currentPostsPage} />
    <input type="hidden" name="usersPage" value={data.currentUsersPage} />
</form>

<h1>Welcome!</h1>
<PostsTable 
    posts={data.posts} 
    total={data.totalPosts} 
    currentPage={data.currentPostsPage}
    limit={data.limit}
    onPageChanged={handlePostsPageChanged} 
/>
<UsersTable 
    users={data.users} 
    total={data.totalUsers}
    currentPage={data.currentUsersPage}
    limit={data.limit}
    onPageChanged={handleUsersPageChanged} 
/>

3. 表格组件示例（以PostsTable为例） #

在组件中实现分页按钮，调用父组件的分页切换函数：

<!-- components/PostsTable.svelte -->
<script>
    export let posts;
    export let total;
    export let currentPage;
    export let limit;
    export let onPageChanged;

    // 计算总页数
    $: totalPages = Math.ceil(total / limit);
</script>

<table>
    <thead>
        <tr>
            <th>ID</th>
            <th>Title</th>
            <th>Body</th>
        </tr>
    </thead>
    <tbody>
        {#each posts as post}
            <tr>
                <td>{post.id}</td>
                <td>{post.title}</td>
                <td>{post.body}</td>
            </tr>
        {/each}
    </tbody>
</table>

<!-- 分页控件 -->
<div class="pagination">
    <button 
        disabled={currentPage === 1}
        on:click={() => onPageChanged(currentPage - 1)}
    >
        上一页
    </button>
    <span>第 {currentPage} 页 / 共 {totalPages} 页</span>
    <button 
        disabled={currentPage === totalPages}
        on:click={() => onPageChanged(currentPage + 1)}
    >
        下一页
    </button>
</div>

方案优势 #

• 保持SSR特性：所有数据请求在服务器端load函数中完成，首屏和分页切换均为SSR渲染，不丢失SEO和性能优势。
• 无URL污染：通过POST表单提交参数，不会在URL中添加查询参数，也不会产生多余浏览器历史记录，符合预期交互体验。
• 实现简洁：无需依赖cookie或复杂状态管理，利用SvelteKit原生表单和load机制即可完成。
• 支持多组件独立分页：通过不同表单字段区分两个表格的分页状态，互不干扰。

内容的提问来源于stack exchange，提问作者Tristan Charles Boniface