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

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天的时间来解决它，我提供的解决方案是：
转到导出按钮库，找到在导出到文件之前构建数据的位置。

你会在那里找到：

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

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

这里是代码示例：

 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);
    }

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

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

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

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

现在一切就绪，您将正确导出所有数据。
希望我的帖子能帮到你。

如果您有任何问题，欢迎提出:)