Datatable-角度导出数据按钮仅创建列标题而不创建数据

Question

导出按钮仅导出列标题，而不导出数据。 我正在angular5中使用数据表，并进行了服务器端处理。

以前，我对所有数据使用clint端处理，并且运行良好，后来我用下面的代码移到服务器端处理。

this.table = $('#my-data-table').DataTable({
  serverSide: true,
  filter: false,
  sort: true,
  orderCellsTop: true,
  columnDefs: [{
    targets: [-1, 0, 1, 2, 4, 10, 12],
    orderable: false,
  }],
  ajax: (dataTablesParameters: any, callback) => {
    this.draw += 1;
    let info = $('#early-detection-data-table').DataTable().page.info();
    if (info.length > 10) {
      if (info.page > 0) {
        this.offset = ((info.length) * (info.page));
      } else {
        this.offset = (((info.page + 1) * 10) - 10);
      }
    } else {
      this.offset = (((info.page + 1) * 10) - 10);
    }
    this.countNumber = (this.offset + 1);
    let limit = info.length;
    this.patientService.getRecentTransmission(limit.toString(), this.offset.toString(), this.searchCriterian).subscribe(
      (data: any) => {
        this.earlyDetections = data;
        let total: number;
        $('.showbox').css('display', 'none');
        //this.setVisiblility();
        if (data[0] && data[0].recordsTotal > 0) {
          total = data[0].recordsTotal;
        } else {
          total = 0;
        }
        callback({
          recordsTotal: total,
          recordsFiltered: total,
          data: [],//JSON.stringify(data),
        });
        console.log(data)
        if (data && data.length != 0) {
          $('td.dataTables_empty').hide();
        } else {
          $('td.dataTables_empty').show();
        }
      });
  }, loadingIndicator: true,
  dom: 'lBfrtip',
  // "order": [[ 7, "desc" ]],
  buttons: {
    buttons: [
      { extend: 'print', className: 'btn btn-primary btn-round' },
      { extend: 'excel', className: 'btn btn-primary btn-round' },
      { extend: 'pdf', className: 'btn btn-primary btn-round' }
    ]
  },
});

请帮助我，并告知我是否还有其他要求。

Answer 1

上周我遇到了同样的问题。
我花了将近2天的时间来解决它，随之而来的解决方案是：
转到导出按钮库，找到导出到文件之前数据的构建位置。

您将在此处找到

end

在我的情况下，这是数据对象：

var = data;
data = {
body: [] //actual data of the table
footer: [] //footer of the table if exists 
header:  [] //header of the table
}

因此您可以看到主体为空，这就是为什么只显示标题的原因。 我所做的是根据服务器调用的响应来构建主体，并将其存储在本地存储中（以便我可以从任何地方访问它）。

这是代码示例：

body: []
footer: null
header: (4) ["#", "Serial Number", "Filter Type", ""]
__proto__: Object

如果data.body是一个空数组，现在在导出时添加一个小逻辑：

 const TableData = [...resp.controllers];
 this.utilService.getDataArrayForExport(TableData, 'Controllers');

    getDataArrayForExport(TableData, TableType) {
        const DataArray = [];
        let formatedObject = {};
        TableData.forEach(function (object, i) {
            switch (TableType) {
                case "Clients":
                    formatedObject = {
                        'email': object.email,
                        'name': object.name,
                        'jobDescription': object.jobDescription,
                        'company': object.company,
                        'countries': object.countries
                    };
                    break;
                case "Controllers":
                    formatedObject = {
                        'controllerSN': object.controllerSN,
                        'filterType': object.filterType
                    };
                    break;
                case "Flushes":
                    const pipeFlush = new DatePipe('en-US');
                    const timeFlush = pipeFlush.transform(object.time, 'short');
                    formatedObject = {
                        'controllerSN': object.controllerId,
                        'description': object.description,
                        'time': timeFlush,
                        'dpBefore': object.dpBefore,
                        'dpAfter': object.dpAfter
                    };
                    break;
                case "Alerts":
                    const pipe = new DatePipe('en-US');
                    const time = pipe.transform(object.time, 'short');
                    formatedObject = {
                        'controllerSN': object.controllerId,
                        'description': object.description,
                        'time': time,
                    };
                    break;
                case "Admins":
                    formatedObject = {
                        'email': object.email,
                        'jobDescription': object.jobDescription,
                        'company': object.company,
                        'countries': object.countries
                    };
                    break;
            }
            const array = [];
            array.push((i + 1).toString());
            $.each(formatedObject, function (key, value) {
                array.push(value);
            });

            DataArray.push(array);
        });
        localStorage.setItem('export', JSON.stringify(DataArray));
        console.dir(DataArray);
    }

现在，数据对象中填充了数据：

var data = dt.buttons.exportData( config.exportOptions );
    var ddd = JSON.parse(localStorage.getItem("export"));
        if(data.body.length === 0){
            data.body = ddd;
        }

现在所有设置都已完成，您将正确导出所有数据。
希望我的帖子对您​​有所帮助。

如果您有任何疑问，欢迎提出：）