首页 > 解决方案 > 使用 Angular 6 Table/Grid 和 web api 的服务器端分页

问题描述

我有一个通过以下方式接受 GET 请求的 web api

https://myapi.net/api/childinfo/getallchildinfo/pagesize/pagenumber

这将返回一个 json 对象数组,如下所示:

 [  
       {  
          "child":{  
             "id":2832,
             "childId":19979,
             "motherId":20072,
             "guardianId":0,
             "fatherId":19549,
             "childFirstName":"Hapan",
             "childMiddleName":"Victoria Sue",
             "childLastName":"Lafromboise",

          },
          "mother":{  
             "id":3274,
             "motherId":20072,
             "motherFirstName":"Chasity",
             "motherMiddleName":null,
             "motherLastName":"Dumarce",

          },
          "father":{  
             "id":2738,
             "fatherId":19549,
             "fatherFirstName":"gary",
             "fatherMiddleName":null,
             "fatherLastName":"Lafromboise",

          },
          "guardian":null
       },
       {  
          "child":{  
             "id":2831,
             "childId":19978,
             "motherId":20071,
             "guardianId":0,
             "fatherId":19548,
             "childFirstName":"Dale",
             "childMiddleName":"Michael Austin",
             "childLastName":"Palmier",       
          },
          "mother":{  
             "id":3273,
             "motherId":20071,
             "motherFirstName":"Glenna",
             "motherMiddleName":null,
             "motherLastName":"Goodsell",
               },
          "father":{  
             "id":2737,
             "fatherId":19548,
             "fatherFirstName":"WILLIAM",
             "fatherMiddleName":null,
             "fatherLastName":"PALMIER",

          },
          "guardian":null
       },
       {  
          "child":{  
             "id":2830,
             "childId":19977,
             "motherId":20070,
             "guardianId":0,
             "fatherId":19547,
             "childFirstName":"Jahna",
             "childMiddleName":null,
             "childLastName":"Grimm",

          },
          "mother":{  
             "id":3272,
             "motherId":20070,
         "motherFirstName":"Casey",
         "motherMiddleName":null,
         "motherLastName":"Miller",

      },
      "father":{  
         "id":2736,
         "fatherId":19547,
         "fatherFirstName":"John",
         "fatherMiddleName":null,
         "fatherLastName":"Grimm",

      },
      "guardian":null
   }
]

网上有很多例子,分页是在客户端完成的,但这对我来说不是一个选择。如上所示,我可以在其中实现服务器端分页的最简单的表格/网格选项是什么?

提前谢谢了...

标签: angularpaginationasp.net-core-webapi

解决方案


你试过角料台吗?

查看标题为Table retrieving data through HTTP的示例


推荐阅读