Tabulator远程排序适配Directus格式问题求助

dataSendParams只能做简单的参数键名映射，没法处理根据排序方向动态给字段加前缀这种逻辑，所以得用自定义URL生成或者请求拦截的方式来实现。下面是两种可行的方案：

方案一：使用ajaxURLGenerator手动构建请求URL #

这个方法直接接管URL的生成逻辑，完全按照Directus的要求拼接参数：

ajaxURLGenerator: function(url, config, params) {
    const searchParams = new URLSearchParams();
    
    // 映射分页参数
    searchParams.append('page', params.page);
    searchParams.append('limit', params.size);
    
    // 处理排序参数
    if (params.sort && params.dir) {
        // 降序时给字段名加'-'前缀
        const sortValue = params.dir === 'desc' ? `-${params.sort}` : params.sort;
        searchParams.append('sort[]', sortValue);
    }
    
    // 如果有多个排序字段（Tabulator开启多排序时），循环处理
    // if (Array.isArray(params.sort)) {
    //     params.sort.forEach((field, index) => {
    //         const dir = params.dir[index] || 'asc';
    //         const sortValue = dir === 'desc' ? `-${field}` : field;
    //         searchParams.append('sort[]', sortValue);
    //     });
    // }
    
    return `${url}?${searchParams.toString()}`;
},

方案二：使用ajaxRequestFunc自定义请求逻辑 #

如果需要更灵活的请求控制（比如用特定的HTTP库、处理请求头），可以用这个方法完全自定义请求：

ajaxRequestFunc: function(url, params, config, callback) {
    const requestParams = {
        page: params.page,
        limit: params.size
    };
    
    // 处理排序参数
    if (params.sort) {
        const sortDir = params.dir || 'asc';
        const sortValue = sortDir === 'desc' ? `-${params.sort}` : params.sort;
        requestParams['sort[]'] = sortValue;
        
        // 多排序场景下的处理
        // if (Array.isArray(params.sort)) {
        //     requestParams['sort[]'] = params.sort.map((field, index) => {
        //         const dir = params.dir[index] || 'asc';
        //         return dir === 'desc' ? `-${field}` : field;
        //     });
        // }
    }
    
    // 这里用fetch发送请求，也可以替换成axios、jQuery.ajax等
    fetch(`${url}?${new URLSearchParams(requestParams)}`, {
        method: 'GET',
        // 如需添加请求头可以在这里配置
        // headers: {
        //     'Authorization': 'Bearer YOUR_TOKEN'
        // }
    })
    .then(res => res.json())
    .then(data => {
        // 按照Tabulator要求返回数据结构：必须包含data（列表数据）和last_page（总页数）
        callback({
            data: data.data,
            last_page: data.meta.total_pages // 对应Directus返回的总页数字段
        });
    })
    .catch(err => {
        callback(false); // 请求失败时返回false
    });
},

关键说明 #

• 之前用dataSendParams失败的原因：它只能静态替换参数名，无法根据dir的值动态修改sort参数的内容，也没法生成sort[]这种数组格式的参数。
• 多排序场景：如果你的Tabulator开启了多排序（columnHeaderSortMulti: true），记得打开代码中注释的多排序处理逻辑，循环生成多个sort[]参数。
• 分页数据映射：Directus返回的分页元数据在meta字段里，要根据实际返回结构调整last_page的取值，确保Tabulator能正确计算总页数。

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