Gridjs分页并使用服务器端参数进行排序答案

【问题标题】：Gridjs pagination and sort with server side parametersGridjs分页并使用服务器端参数进行排序
【发布时间】：2022-07-18 06:47:08
【问题描述】：

我使用gridsjs sort 和 paginaton 服务器端配置，当我用于分页时，它可以完美地工作，但是对于像这样http://scrum.test/api/customers&sort_by=id&sort=DESC?page=1 那样对参数进行排序时，当正确的参数像这样http://scrum.test/api/customers/?sort_by=id&sort=ASC&page=1 时，它不能正常工作，这是我的代码。

let tableCustomer = $('#table-customer').Grid({
        columns: [
            'ID',
            'Name',
            'Email'
        ],
        search: true,
        pagination: {
            enabled: true,
            limit: 20,
            server: {
                url: (prev, page, limit) =>  {
                    return `${prev}?page=${(page+1)}`
                }
            }
        },
        sort : {
            server: {
                url: (prev, columns) => {
                    console.log('sprt', prev);
                    if (!columns.length) return prev;
                    const col = columns[0];
                    const dir = col.direction === 1 ? 'ASC' : 'DESC';
                    let colName = ['id', 'name', 'email'][col.index];
                    
                    return `${prev}&sort_by=${colName}&sort=${dir}`;
                }
            }
        },
        
        server : {
            url: BASE_URL + 'api/customers',
            then: response => response.data.map(customer => [ customer.id, customer.name, customer.email]),
            total: response => response.total
        },
        
        
    });

【问题讨论】：

请澄清您的具体问题或提供其他详细信息以准确突出您的需求。正如目前所写的那样，很难准确地说出你在问什么。

标签： javascript gridjs

【解决方案1】：

正如您使用分页所做的那样，有必要进行排序。启用排序插件。 Sort 有两个配置对象：

通用配置：为所有列启用排序、启用多列排序、服务器端集成等。 特定列配置：对特定列启用排序，设置自定义比较器功能等。

通用排序配置：

optional
类型：boolean 或 GenericSortConfig
示例：Sorting

特定列的排序配置

optional
类型：boolean 或 SortConfig
示例：Custom sort

SortConfig 类型具有以下属性：

启用 - 启用/禁用分页 - 布尔值
比较optional - 自定义比较器功能 - Comparator<TCell>

所以，按照上面的官方文档，这段代码会

        sort : {
            server: {
                url: (prev, columns) => {
                    console.log('sprt', prev);
                    if (!columns.length) return prev;
                    const col = columns[0];
                    const dir = col.direction === 1 ? 'ASC' : 'DESC';
                    let colName = ['id', 'name', 'email'][col.index];
                    
                    return `${prev}&sort_by=${colName}&sort=${dir}`;
                }
            }
        },

它应该看起来像这样：

        sort: {
          enabled: true,
          multiColumn: true,
          server: {
            url: (prev, columns) => {
              const columnIds = ['id', 'name', 'email'];
              const sort = columns.map(col => (col.direction === 1 ? '+' : '-') + columnIds[col.index]);
              return updateUrl(prev, {sort});
            },
          },
        },

updateURL:

      const updateUrl = (prev, query) => {
        return prev + (prev.indexOf('?') >= 0 ? '&' : '?') + new URLSearchParams(query).toString();
      };

【讨论】：