datatable angular10 export buttons dosent show data-just show header

saghar

Hi, Im using databale in my project and it works well, but i cant use export buttons becouse they dosent show data- API call get correct response, but dosent show>>

    ngOnInit(): void {
        this.setDefaultDateTimeParams();
        var oldExportAction = function (self, e, dt, button, config) {
            if (button[0].className.indexOf('buttons-excel') >= 0) {
                if (($.fn.dataTable.ext as any).buttons.excelHtml5.available(dt, config)) {
                    ($.fn.dataTable.ext as any).buttons.excelHtml5.action.call(self, e, dt, button, config);
                } else {
                    ($.fn.dataTable.ext as any).buttons.excelFlash.action.call(self, e, dt, button, config);
                }
            } else if (button[0].className.indexOf('buttons-print') >= 0) {
                ($.fn.dataTable.ext as any).buttons.print.action(e, dt, button, config);
            }
        };

        var newExportAction = function (e, dt, button, config) {
            var self = this;
            var oldStart = dt.settings()[0]._iDisplayStart;

            dt.one('preXhr', function (e, s, data) {
                // Just this once, load all data from the server...
                data.start = 0;
                data.limit = -1;

                dt.one('preDraw', function (e, settings) {
                    // Call the original action function 
                    oldExportAction(self, e, dt, button, config);

                    dt.one('preXhr', function (e, s, data) {
                        // DataTables thinks the first item displayed is index 0, but we're not drawing that.
                        // Set the property to what it was before exporting.
                        settings._iDisplayStart = oldStart;
                        data.start = oldStart;
                    });

                    // Reload the grid with the original page. Otherwise, API functions like table.cell(this) don't work properly.
                    setTimeout(dt.ajax.reload, 0);

                    // Prevent rendering of the full data to the DOM
                    return false;
                });
            })

            // Requery the server with the new one-time export settings
            dt.ajax.reload();
        };


        const that = this;
        this.dtOptions = {
            bFilter: false,
            info: false,
            pagingType: 'full_numbers',
            pageLength: 10,
            serverSide: true,
            processing: true,
            ajax: (dataTablesParameters: any, callback) => {

                this.filter.page = (dataTablesParameters.start / dataTablesParameters.length);
                this.filter.pageSize = dataTablesParameters.length
                this.filter.fromDate = moment(this.fromDate).format('x');
                this.filter.toDate = moment(this.toDate).format('x');

                this.customerService.getResults(dataTablesParameters, this.filter).subscribe(pagedData => {
                    this.page.recordsFiltered = pagedData.content.recordsFiltered;
                    this.reportList = pagedData.content.data;

                    callback({
                        recordsTotal: pagedData.content.recordsTotal,
                        recordsFiltered: pagedData.content.recordsFiltered,
                        data: []
                    });
                });

            },
            columnDefs: [{ // set default column settings
                'orderable': false,
                'targets': [0, 1, 2, 3]
            }],
            columns: [{ data: 'firstName' }, { data: 'lastName' }, { data: 'creation' }, { data: 'mobileNo' }],
            language: this.datatabaleLang,
            dom: 'Bfrtip',
            buttons: [{
                extend: 'excelHtml5',
                title: ' گزارش مشتریان',
                text: 'خروجی excel',
                action: newExportAction,
                exportOptions: {
                    columns: [0, 1, 2, 3]
                },
            },
            {
                extend: 'print',
                title: ' گزارش مشتریان',
                text: 'پرینت لیست',
                action: newExportAction,
                exportOptions: {
                    columns: [0, 1, 2, 3]
                },
                customize: function (win) {
                    $(win.document.body)
                        .css('font-size', '10pt')
                        .css('text-align', 'center')
                        .css('padding-right', '10%')
                        .css('background-color', '#c2c2c2')
                        .prepend(
                            '<span>همراه کارت</span>'
                        );

                    $(win.document.body).find('table')
                        .addClass('print-preview')
                }
            }
            ]
        };
    }

even I tried simple mode of buttons, but it didnt work ...

 buttons: [
                {
                  extend: 'collection',
                  text: 'Export',
                  buttons: [
                    'copy',
                    'excel',
                    'csv',
                    'pdf',
                  ]
                }
              ],

can anyone help me, please?

colin

It would be worth looking at this thread, as it's trying to do the same as you want - export by getting all data from the server.

If that doesn't help, we're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin