如何在Grid.js中实现服务端分页、搜索与排序功能？

你的核心问题是单独配置的服务端搜索、分页、排序逻辑互相冲突：初始URL已带查询参数，而search/pagination的server.url直接拼接?会生成格式错误的请求地址；同时参数格式（如分页用limit/offset而非后端需要的page/size）不匹配，且未处理排序参数，最终导致接口请求失败。

以下是修正后的代码，将所有服务端逻辑整合到统一的server.url函数中，确保参数正确合并：

<script>
    import Grid from 'gridjs-svelte';
    import { page } from '$app/stores';

    const columns = [
        {
            name: 'Nombres',
            sort: true
        },
        {
            name: 'Apellido',
            sort:true
        }
    ];
</script>

<Grid
    {columns}
    <!-- 启用服务端排序、搜索、分页 -->
    sort={{ enabled: true, server: true }}
    search={{ enabled: true, server: true }}
    pagination={{ limit: 5, server: true }}
    server={{
        url: (prev, params) => {
            // 使用URLSearchParams统一处理查询参数，避免格式错误
            const urlParams = new URLSearchParams();
            
            // 适配后端分页参数：Grid.js页码从1开始，后端从0开始，需减1
            urlParams.set('page', params.page - 1);
            urlParams.set('size', params.limit);
            
            // 转换排序参数为后端需要的格式（如"apellido,asc"）
            if (params.sort.length > 0) {
                const sortField = params.sort[0].column.toLowerCase();
                const sortDir = params.sort[0].direction.toLowerCase();
                urlParams.set('sort', `${sortField},${sortDir}`);
            }
            
            // 添加搜索参数
            if (params.search) {
                urlParams.set('search', params.search);
            }
            
            // 返回拼接好的完整请求地址
            return `https://mytestingdomain.com/afiliado/find?${urlParams.toString()}`;
        },
        headers:{ 
            'Authorization': 'Bearer thisiswherethetokengoes', 
            'Content-Type': 'application/json' 
        },
        then: (data) =>
            data.content.map((afiliado) => {
                return [afiliado.nombres, afiliado.apellido];
            }),
        // 传入总条数，让分页组件正确计算总页数（需后端返回该字段）
        total: (data) => data.totalElements
    }}
/>

<style global>
    @import 'https://cdn.jsdelivr.net/npm/gridjs/dist/theme/mermaid.min.css';
</style>

关键修改说明 #

1. 统一参数处理逻辑：放弃单独配置search.server.url和pagination.server.url，改用server.url的统一函数接收所有参数（搜索关键词、分页、排序信息），避免参数冲突。
2. 适配后端参数格式：
   • 分页：将Grid.js的page（从1开始）转换为后端需要的page（从0开始），limit替换为后端的size参数。
   • 排序：将Grid.js传入的排序数组转换为后端要求的字段,方向格式。
3. 规范URL拼接：用URLSearchParams自动处理参数拼接，避免手动拼接导致的?重复、参数覆盖等问题。
4. 添加总条数返回：通过total字段返回数据总条数，确保分页组件能正确显示页码数量。

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