服务器端 Ajax 配置 Angular-GET 请求的数据表

Question

我正在使用 Angular 版本 5。我需要为 angular-数据表做服务器端。它适用于 POST 请求，但我无法使用 GET 请求。

有一个示例 API (https://angular-datatables-demo-server.herokuapp.com/)，它对 GET 和 POST 请求给出相同的响应。 Angular-datatables 在服务器端为 POST 而不是 GET。

这是一个代码示例 (https://stackblitz.com/edit/visible-columns-with-serverside-loading-angular-way)。

Answer 1

终于成功了。我需要通过请求参数发送数据表信息。这就是我所做的。

 this.dtOptions = {
      paging: true,
      lengthChange: false,
      searching: true,
      pageLength: 10,
      columnDefs: [{ targets: 3, orderable: false }],
      pagingType: 'simple_numbers',
      order: [[0, 'desc']],
      serverSide: true,
      processing: true,
      ajax: (dataTablesParameters: any, callback) => {
        const params = this.objectToHttpParams(dataTablesParameters);
        console.log('params', params);

        this.http
          .get(
            'http://myapi.com',
            {
              params: params,
              headers: new HttpHeaders().set(
                'token',
                localStorage.getItem('token')
              )
            }
          )
          .subscribe(resp => {

            this.result = resp['data'];

            callback({
              recordsTotal: resp['length'],
              recordsFiltered: resp['length'],
              data: []
            });
          });
      }
    };

// Helper Function
 objectToHttpParams(obj: any) {
    return Object.entries(obj || {}).reduce((params, [key, value]) => {
      return params.set(
        key,
        isObjectLike(value) ? JSON.stringify(value) : String(value)
      );
    }, new HttpParams());
  }

有了这些选项，我可以让它与 GET 请求一起工作，还可以发送 HTTP 参数和 Headers 而不是发送 body。

Answer 2

这对我有用

Example reference

      ajax: (dataTablesParameters: any, callback) => {
        const params = {};
        this.objectToHttpParams(params , dataTablesParameters , '');
        this.http
          .get(
            'http://myapi.com,
            {
              params: params,
               headers: new HttpHeaders().set(
                'token',
                localStorage.getItem('token')
              )
            }
          ).subscribe(resp => {
            this.result = resp['data'];

            callback({
              recordsTotal: resp['length'],
              recordsFiltered: resp['length'],
              data: []
            });
          });
      },


  objectToHttpParams(params: any, data: any, currentPath: string) {
    Object.keys(data).forEach(key => {
        if (data[key] instanceof Object) {
          if (currentPath !== '' ) {
            this.objectToHttpParams(params, data[key], `${currentPath}[${key}]`);
          } else {
            this.objectToHttpParams(params, data[key], `${currentPath}${key}`);
          }
        } else {
            if (currentPath !== '' ) {
              params[`${currentPath}[${key}]`] = data[key];
            } else {
              params[`${currentPath}${key}`] = data[key];
            }
        }
    });
  }

验证并调整了几件事，当服务器端参数存在时，我能够复制本机数据表参数的行为 Credit

服务器端 Ajax 配置 Angular-GET 请求的数据表

Server Side Ajax configuration for Angular-datatables for GET Request

datatables

angular-datatables

angular