Grid.js服务端排序触发多次重复请求的原因及解决方法

原因分析 #

问题根源在分页配置的URL拼接逻辑：你的分页server.url函数直接用?拼接参数，但初始请求URL已经带有?（https://swapi.dev/api/films?），生成了格式无效的URL（如https://swapi.dev/api/films??limit=3&offset=0）。当触发排序时，Grid.js内部请求处理逻辑解析该无效URL时，会重复发起请求，次数恰好等于可排序列的数量。

解决方法 #

修正参数拼接逻辑：判断初始URL是否已包含参数分隔符?，已存在则用&拼接新参数，否则用?，确保URL格式合法。

修正后的代码 #

<!DOCTYPE html>
<html lang="en">
  <head>
    <link
      href="https://unpkg.com/gridjs/dist/theme/mermaid.min.css"
      rel="stylesheet"
    />
  </head>
  <body>
    <div id="wrapper"></div>
    
    <script src="https://unpkg.com/gridjs/dist/gridjs.umd.js"></script>
    <script type="text/javascript">
      new gridjs.Grid({
        columns: ['Title', 'Director', 'Producer'],
        sort: {
          multiColumn: false,
          server: {
            url: (prev, columns) => {
              if (!columns.length) return prev;
              const col = columns[0];
              const dir = col.direction === 1 ? 'asc' : 'desc';
              const colName = ['title', 'director', 'producer'][col.index];
              // 动态选择参数分隔符
              const separator = prev.includes('?') ? '&' : '?';
              return `${prev}${separator}order=${colName}&dir=${dir}`;
            }
          }
        },
        pagination: {
          limit: 3,
          server: {
            url: (prev, page, limit) => {
              const params = `limit=${limit}&offset=${page * limit}`;
              // 动态选择参数分隔符
              const separator = prev.includes('?') ? '&' : '?';
              return `${prev}${separator}${params}`;
            }
          }
        },
        server: {
          url: 'https://swapi.dev/api/films?',
          then: data => data.results.map(m => [
            m.title, m.director, m.producer
          ]),
          total: data => data.count
        } 
      }).render(document.getElementById("wrapper"));
    </script>
  </body>
</html>

额外提示 #

如果只需部分列支持排序，可在columns配置中为对应列添加sort: false属性，进一步减少潜在的请求问题。

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