Trying to add buttons using Angular 6

rdoekes

We are trying to add the buttons to a datatable. The table itself works fine, but the buttons do not show.

Here is our ts file:

import {ChangeDetectorRef, Component, OnInit} from '@angular/core';
import {HttpClient} from '@angular/common/http';
import {Router} from '@angular/router';
import * as $ from 'jquery';
import 'datatables.net';
import 'datatables.net-buttons';

@Component({
selector: 'app-datatable',
templateUrl: './component.html',
styleUrls: ['./component.scss']
})
export class AppDataTableComponent implements OnInit {

public rows: any[] = [];

constructor(private http: HttpClient,              
          private chRef: ChangeDetectorRef) { }


ngOnInit() {

    this.http.get('/api/events').subscribe( resp => {
        this.rows = resp['data'];
        this.chRef.detectChanges();

        const table: any = $('#journalTable');
            this.datatable = table.DataTable({
              buttons: [
                'copyHtml5', 'csvHtml5'
              ]});
    });

}

}

html looks like this:

<div>
<table id="journalTable" class="table table-hover">
<thead>
<tr>
<th>Subject</th>
<th>Start</th>
</tr>
</thead>
<tbody >
<tr *ngFor="let row of rows">
<td>{{row.subject}}</td>
<td>{{row.startDate}}</td>
</tr>
</tbody>
</table>
</div>

We've also installed the following components:
"datatables.net": "^1.10.19",
"datatables.net-bs4": "^1.10.19",
"datatables.net-buttons-bs4": "^1.5.4",
"datatables.net-buttons-dt": "^1.5.4",
"datatables.net-colreorder-bs4": "^1.5.1",
"datatables.net-dt": "^1.10.19",
"datatables.net-responsive": "^2.2.3",
"datatables.net-responsive-bs4": "^2.2.3",
"datatables.net-responsive-dt": "^2.2.3",
"datatables.net-rowgroup-bs4": "^1.1.0",
"datatables.net-scroller-bs4": "^1.5.1",

What do we need to do to get the buttons to show up on our data table?

kthorngren

Maybe this doc will help?
https://datatables.net/extensions/buttons/#Displaying-the-buttons

Kevin

rdoekes

Hi Kevin,

Thanks for the help. Unfortunately this does not help much. When I add the dom: 'Bfrtip' property to the DataTable() declaration, the show [x] items drop down while there are still no buttons.

None of the documentation explains how to do this using Angular 2 or higher

kblo55

I'm also using angular 6 and was trying everything to get buttons to show up. The way I finally got them to show for me was adding imports for the button js to my ts file.

import 'datatables.net-buttons/js/buttons.flash';
import 'datatables.net-buttons/js/buttons.html5';
import 'datatables.net-buttons/js/buttons.print';

assafse

I have the same issue..

any one can assist?

assafse

I used this and solved:

import 'datatables.net-buttons/js/buttons.flash';
import 'datatables.net-buttons/js/buttons.html5';
import 'datatables.net-buttons/js/buttons.print';
import * as $ from 'jquery';
import 'datatables.net';
import 'datatables.net-buttons';
import pdfMake from "pdfmake/build/pdfmake";
import pdfFonts from "pdfmake/build/vfs_fonts";
pdfMake.vfs = pdfFonts.pdfMake.vfs;

export class ClientUserInfoComponent implements OnInit, OnDestroy {
@ViewChild('xxx') table;
xxx: any;
@ViewChild(DataTableDirective)
dtElement: DataTableDirective;
dtOptions: DataTables.Settings = {};
dtTrigger: Subject<any> = new Subject();

ngOnInit() {
this.dtOptions = {
pagingType: 'full_numbers',
pageLength: 10,
responsive: true,
order: [0, 'desc'],
dom: '<lf<Bt>ip>',
buttons: [
'copy', 'csv', 'excel', 'pdf', 'print', 'colvis',
]

    };

}