csvHtml5
Create and save a CSV file that contains the data from the table (HTML5).
Please note - this property requires the Buttons extension for DataTables.
Description
This button provides the end user with the ability to save the table's data into a locally created Comma Separated Values (CSV) file. That file can then be used by variety of programs including spreadsheet and data analysis applications.
This button requires a reasonably modern browser in order to operate (IE8 and 9 are not supported).
Browser support
The API methods used by this button are supported in the following browsers. If the browser being used does not support the requirements for this button, it simply will not be displayed.
- Internet Explorer 10+
- IE9 and older are not supported as they do not support the
FileReader
API available in newer browsers.
- IE9 and older are not supported as they do not support the
- Edge: Yes
- Chrome: Yes
- Opera: Yes
- Safari: No
- Safari does not currently support the ability to download generated files (see WebKit bug 156056). As soon as this has been addressed in Safari it will be released here.
Options
This button can have the following options set in its configuration object to customise its actions and display, in addition to those options which are available for all buttons (e.g. buttons.buttons.text
):
Name | Type | Default |
---|---|---|
action | ||
Create and save a CSV file. | ||
bom Since: 1.2.2 | false | |
Option to include UTF-8 Byte Order Mark ( | ||
charset | null | |
Character set to use in the file export. When | ||
className | buttons-csv buttons-html5 | |
The button's class name. See | ||
customize Since: 1.1.1 | undefined | |
Function that can be used to modify the contents of the exported data. The function takes two parameters, the data as configured by the button and the button's configuration object. The value that the function returns is the value that will be used for the export. This can be particularly useful if you wish to add a company header or footer, description data or any other information to the exported data. As of Buttons 1.5.2 this function is passed three parameters:
| ||
escapeChar | " | |
Character to use as the escape character for CSV data. This will be prefixed to any data found in the fields which matches that set by the | ||
exportOptions | {} | |
Select the data to be gathered from the DataTable for export. This includes options for which columns, rows, ordering and search. Please see the | ||
extension | .csv | |
The extension to give the created file name. | ||
fieldBoundary | " | |
The character(s) used to enclose each field in the plain text representation of the table that is saved in th CSV file. This is automatically added at the start and end of each cell's data. | ||
fieldSeparator | , | |
The character(s) used to separate fields in the plain text representation of the table that is saved in the CSV file. | ||
filename | * | |
File name to give the created file (plus the extension defined by the | ||
footer | false | |
Indicate if the table footer should be included in the exported data or not. | ||
header | true | |
Indicate if the table header should be included in the exported data or not. | ||
newline | \n | |
The character(s) used to separate the lines of data. Please note that on Windows client's the default is | ||
text | CSV | |
The button's display text. The text can be configured using this option (see |
Examples
DataTables initialisation: Use the HTML5 CSV button:
$('#myTable').DataTable( {
buttons: [
'csvHtml5'
]
} );
DataTables initialisation: Use the csv
button type to alias the HTML button options.:
$('#myTable').DataTable( {
buttons: [
'csv'
]
} );
DataTables initialisation: Use the exportOptions
to save all data, regardless of filtering:
$('#myTable').DataTable( {
buttons: [
{
extend: 'csvHtml5',
text: 'Copy all data',
exportOptions: {
modifier: {
search: 'none'
}
}
}
]
} );