如何使用令牌在Angular材质表中设置服务器端分页 [英] How to set server side pagination in Angular material Table using token

问题描述

在使用角型分页器时，我遇到了问题.在这里，我正在获取如下数据

here i have a issue while working with angular paginator . here i am getting data like below

响应一:

{
    "Tabledata": [
      {
        "firstName":"Samuel",
        "lastName":"Smith"
      },
      {
        "firstName":"Sanu",
        "lastName":"Smith"
      }
    ],
    "paging": {
        "RecordsCount": 2,
        "token": "JhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9"
    }
}

响应二: 我得到的总记录数为50

Response Two: I am getting total records count as 50

 { 
    'RecordsCount' : 50
  }

现在在初始调用中，我正在调用api，并且api格式如下

Now in the initial call the i am calling api and the api format is below

初始通话

http://some api.com/data?searchParams=&pageSize=2&token=

拨打此电话后，我将收到如下响应

After calling this i will get response like below

{
        "Tabledata": [
          {
            "firstName":"Samuel",
            "lastName":"Smith"
          },
          {
            "firstName":"Sanu",
            "lastName":"Smith"
          }
        ],
        "paging": {
            "RecordsCount": 2,
            "token": "JhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9"
        }
    }

，然后按下一步按钮后，api应该发起另一个http调用，并使用此令牌并将其发送给同一api的params 像下面一样

and after pressing the next button the api should initiate another http call and use this token and send it params for the same api like below

第二通电话

http://some api.com/data?searchParams=&pageSize=2&令牌= JhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9

http://some api.com/data?searchParams=&pageSize=2&token=JhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9

此呼叫后，我将再次得到相同的响应，但令牌在此更改

After this call i will get again same response but here token changes

{
            "Tabledata": [
              {
                "firstName":"Samuel",
                "lastName":"Smith"
              },
              {
                "firstName":"Sanu",
                "lastName":"Smith"
              }
            ],
            "paging": {
                "RecordsCount": 2,
                "token": "abcd"
            }
        }

如果我在第三次api调用中再次按next键，则应将第二个响应令牌用作第三次调用的参数，它将给出一些令牌，如果用户按下Prev，则应使用该令牌并在此处作为参数发送我无法解决我写的前端

And if i press next again in the 3rd api call is should use the 2nd response token as param for the 3rd call and it will give some token and if user presses Prev then it should use that tocken and send as param here this i am unable to solve this in front end i wrote like

 <mat-paginator [pageSize]="10" [length]="totalLength"  [pageSizeOptions]="[5, 10, 25, 100]" (page)="PageEvents($event)"></mat-paginator>


PageEvents(event: PageEvent){
    this.pageNumber = 1;
    const pageSize = +event.pageSize; 
    const currentPage = +event.pageIndex + 1; 
    const pagination = {
      searchQuery: '',
      pageSize: pageSize,
      token: ''
    };
    if(currentPage > this.pageNumber) {

     

      console.log('next button',pageSize,currentPage)
    } else {
     
      console.log('prev button',pageSize,currentPage)

    }

  }

totalLength= 50

totalLength= 50

这是我的问题

1. 尽管我正在发送totallenght ui来禁用我的上一个和下一个按钮
2. 我如何实现这种分页

1. Although i am sending totallenght ui disabling my prev and next button
2. How can i achieve this pagination

推荐答案

首先，建议避免使用分页符. 您可以简单地使用skip和limit.您当前正在使用的是pageSize，它可以用作限制和 让我们将新参数currentPage称为跳过. 无论如何继续使用令牌，实现逻辑如下.

First of all, It is recommended to avoid using a token for pagination. You can simply use skip and limit. Something that you are currently using is pageSize which works as limit and let us call a new param currentPage as skip. Anyways moving ahead with token, the implementation logic is as below.

第1步

对于存在分页器的组件，您需要以下成员变量.

You will need following member variables for component in which paginator is present.

  defaultPayload = {
    searchParams : "",
    pageSize : 2,
    currentPage : 1,
    token : ""
  };
  totalLength = 0;

defaultPayload是您的服务的参数，新数据通过该参数输入. 您需要在角度服务级别使用currentPage来实现tokenMap，这将说明 在某个时候. totalLength，因为您已经将其绑定到mat-paginator.

the defaultPayload is argument to your service through which new data comes in. You need currentPage at angular service level for tokenMap implementation will explain in sometime. totalLength as you have already binded it to mat-paginator.

在继续之前，您对totalLength有疑问.如图所示，您的totalLength 为2，因为pageSize为10，下一个和上一个功能被禁用.这也是有道理的.如果您的响应RecordsCount为50，则如以下步骤所示，如果设置了成员变量，它将显示.

Before moving ahead, you have a question about totalLength. As shown in image your totalLength is 2, As the pageSize is 10, the functionality of next and previous are disabled. It makes sense too. If your response RecordsCount is 50, it will show up if you have set the member variable as the following step demonstrates.

第2步加载

假设我们在ngInit中订阅了api服务

Let's say we are subscribed to the api service as below in ngInit

  ngOnInit() {
    this.getDataService(this.defaultPayload)
    .subscribe(
        res => {
          this.defaultPayload.token = paging['token'];
          this.totalLength = paging['RecordsCount'];
        },
        err => {}
    );
  }

在回复中，我们是:

• 为第一个api加载设置默认令牌
• 在totalLength中设置响应RecordsCount(您可能期望50，但它是2)
• 每次在步骤3中发生事件时，我们都会在此处自行设置响应数据.

• setting default token for first api onload
• setting response RecordsCount in totalLength (which you might be expecting 50, but its 2)
• Every time an event occurs in step 3, we will set the data on response here itself.

第3步发生事件

PageEvents(event){
    console.log("event", event, this.defaultPayload);
    const pageSize = event.pageSize; 
    const currentPage = event.pageIndex + 1; 
    this.defaultPayload.pageSize = pageSize;
    this.defaultPayload.currentPage = currentPage;
    this.getDataService(this.defaultPayload)
}

注意我们只是根据新事件再次重置我们的请求有效负载， 拨打服务电话.

Note We are just resetting our request payload again as per new event and make a service call.

第4步服务

请说我们有以下服务负责 提供数据.我们需要维护某种形式的令牌存储.你可能 根据需要使用localstorage或仅使用下面的对象.这是 之所以需要，是因为我们需要为所有(旧)上一页和(新)下一页事件维护令牌.

let say we have some service as follows that is responsible for providing data. We need to maintain some kind of storage for token. you might use localstorage or simply an object as below whatever suits your need. This is needed because we need to maintain tokens for all (old) prev and (new) next page events.

 constructor() { 
        this.tokenMap = {};
    }
  
    getDataService({...options, currentPage}){
        options.token = findToken(currentPage)
        //http request using {options}
        //on response setToken
        this.setTokenMap(options.currentPage, response['token])
        return responseData
    }

    findToken(page){
        return this.tokenMap[page || 1] || "";
    }

    setTokenMap(page, token){
        this.tokenMap[page] = token;
    }

此服务将在进行api调用时找到令牌，并设置 每个currentPage的新令牌，因此您不必担心令牌 在组件中. 这将分开您对令牌逻辑和 组件分页器数据.

This service will find the token while making an api call, and also set the new token as per currentPage, hence you don't have to bother about token in component. This will separate your concerns of the token logic and component paginator data.

这篇关于如何使用令牌在Angular材质表中设置服务器端分页的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！