用于 GET 请求的 Angular 数据表的服务器端 Ajax 配置答案

【问题标题】：Server Side Ajax configuration for Angular-datatables for GET Request用于 GET 请求的 Angular 数据表的服务器端 Ajax 配置
【发布时间】：2019-01-11 10:21:30
【问题描述】：

我使用的是 Angular 版本 5。我需要为 angular-datatables 做服务器端。它适用于 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)。

【问题讨论】：

标签： angular datatables angular-datatables

【解决方案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 参数和标头，而不是发送正文。

【讨论】：

谢谢。仅供参考，我也使用params : dataTablesParameters 完成了这项工作。一开始我跟着你的，但我找不到初始化objectToHttpParams。

【解决方案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

【讨论】：