Grid.js服务器端分页示例

将server属性添加到pagination配置以启用服务器端分页。另外，请确保total在主server配置块中正确定义了该属性：

<!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>
            new gridjs.Grid({
                columns: ['Pokemon', 'URL'],
                pagination: {
                    enabled: true,
                    limit: 5,
                    server: {
                        url: (prev, page, limit) => `${prev}?limit=${limit}&offset=${page * limit}`
                    }
                },
                server: {
                    url: 'https://pokeapi.co/api/v2/pokemon',
                    then: data => data.results.map(pokemon => [
                                pokemon.name, pokemon.url
                            ]),
                    total: data => data.count
                }
            }).render(document.getElementById("wrapper"));
        </script>
    </body>
</html>

https://pokeapi.co/api/v2/pokemon

{
  "count": 1118,
  "next": "https://pokeapi.co/api/v2/pokemon?offset=20&limit=20",
  "previous": null,
  "results": [
    {
      "name": "bulbasaur",
      "url": "https://pokeapi.co/api/v2/pokemon/1/"
    },
    {
      "name": "ivysaur",
      "url": "https://pokeapi.co/api/v2/pokemon/2/"
    },
    {
      "name": "venusaur",
      "url": "https://pokeapi.co/api/v2/pokemon/3/"
    },
    {
      "name": "charmander",
      "url": "https://pokeapi.co/api/v2/pokemon/4/"
    },
    {
      "name": "charmeleon",
      "url": "https://pokeapi.co/api/v2/pokemon/5/"
    },
    {
      "name": "charizard",
      "url": "https://pokeapi.co/api/v2/pokemon/6/"
    },
    {
      "name": "squirtle",
      "url": "https://pokeapi.co/api/v2/pokemon/7/"
    },
    {
      "name": "wartortle",
      "url": "https://pokeapi.co/api/v2/pokemon/8/"
    },
    {
      "name": "blastoise",
      "url": "https://pokeapi.co/api/v2/pokemon/9/"
    },
    {
      "name": "caterpie",
      "url": "https://pokeapi.co/api/v2/pokemon/10/"
    },
    {
      "name": "metapod",
      "url": "https://pokeapi.co/api/v2/pokemon/11/"
    },
    {
      "name": "butterfree",
      "url": "https://pokeapi.co/api/v2/pokemon/12/"
    },
    {
      "name": "weedle",
      "url": "https://pokeapi.co/api/v2/pokemon/13/"
    },
    {
      "name": "kakuna",
      "url": "https://pokeapi.co/api/v2/pokemon/14/"
    },
    {
      "name": "beedrill",
      "url": "https://pokeapi.co/api/v2/pokemon/15/"
    },
    {
      "name": "pidgey",
      "url": "https://pokeapi.co/api/v2/pokemon/16/"
    },
    {
      "name": "pidgeotto",
      "url": "https://pokeapi.co/api/v2/pokemon/17/"
    },
    {
      "name": "pidgeot",
      "url": "https://pokeapi.co/api/v2/pokemon/18/"
    },
    {
      "name": "rattata",
      "url": "https://pokeapi.co/api/v2/pokemon/19/"
    },
    {
      "name": "raticate",
      "url": "https://pokeapi.co/api/v2/pokemon/20/"
    }
  ]
}

Grid.js服务器端分页示例

猜你喜欢