This is the continuation of PART 6

Subscribe my channel on YouTube.

Follow me On Medium

Previous Parts:

Part 1 — Zero Configuration

Part 2 — Future enable / disable (settings)

Part 3 — Multiple Tables

Part 4 — Hidden Columns

Part5 — Alternate Pagination

Part6 — JSON Data(Using web services)

Exporting data from a table can often be a key part of a complex application. The Buttons extension for DataTables provides three plug-ins that provide overlapping functionality for data export:

  • HTML5 export buttons — makes use of HTML5 APIs to create files client-side
  • Flash export buttons — uses Adobe Flash for legacy browsers
  • Print button

Both sets of buttons provide:

  • Copy to clipboard
  • Save as Excel (XLSX)
  • Save as CSV
  • Save as PDF
  • Display a print view

The following JavaScript library files are loaded for use DataTable file export.

npm install jszip --save
npm install datatables.net-buttons --save
npm install datatables.net-buttons-dt --save
npm install @types/datatables.net-buttons --save-dev
npm install pdfmake --save

Add the dependencies in the scripts in to your angular.json file

"scripts": [
"node_modules/jquery/dist/jquery.js",
"node_modules/datatables.net/js/jquery.dataTables.js",
"node_modules/jszip/dist/jszip.js",
"node_modules/datatables.net-buttons/js/dataTables.buttons.js",
"node_modules/datatables.net-buttons/js/buttons.colVis.js",
"node_modules/datatables.net-buttons/js/buttons.flash.js",
"node_modules/datatables.net-buttons/js/buttons.html5.js",
"node_modules/datatables.net-buttons/js/buttons.print.js",
"src/assets/pdfmake/pdfmake.min.js",
"src/assets/pdfmake/vfs_fonts.js"
]

Your angular.json file scripts section must like this.

Data Tables settings should like the following in your app componet class file.

this.dtOptions = {
"ajax": {
url: 'http://localhost/country/country.php',
type: 'POST',
data: {'id': 1, 'name': 'sathish'}
},
columns: [
{
title: 'Short Name',
data: 'short_name'
},
{
title: 'Long Name',
data: 'long_name'
},
{
title: 'ISO 3',
data: 'iso3'
},
{
title: 'ISO 2',
data: 'iso2'
}
],
dom: 'Bfrtip',
buttons: [
'copy', 'csv', 'excel', 'pdf', 'print'
]
};

dom option to tell DataTables where to display the buttons

the buttons option can be given as an array of the buttons you wish to show

dom: 'Bfrtip',
buttons: [
'copy', 'csv', 'excel', 'pdf', 'print'
]

Your component template file like this

<table #dataTable class="display" style="width:100%">
</table>

and app component class file like this

import {Component, ViewChild, OnInit} from '@angular/core';
declare var $;
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit{
@ViewChild('dataTable') table;
dataTable: any;
dtOptions: any;
constructor(){
}

ngOnInit(): void {
this.dtOptions = {
"ajax": {
url: 'http://localhost/country/country.php',
type: 'POST',
data: {'id': 1, 'name': 'sathish'}
},
columns: [
{
title: 'Short Name',
data: 'short_name'
},
{
title: 'Long Name',
data: 'long_name'
},
{
title: 'ISO 3',
data: 'iso3'
},
{
title: 'ISO 2',
data: 'iso2'
}
],
dom: 'Bfrtip',
buttons: [
'copy', 'csv', 'excel', 'pdf', 'print'
]
};
this.dataTable = $(this.table.nativeElement);
this.dataTable.DataTable(this.dtOptions);
}
}