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

3 COMMENTS

  1. I love your blog.. very nice colors & theme. Did you design this
    website yourself or did you hire someone to
    do it for you? Plz reply as I’m looking to construct my own blog
    and would like to find out where u got this from. thanks a
    lot