Buttons has two different methods that can be used to format the data exported differently from the data that is shown in the table: orthogonal options and formatting functions as shown in this example. They both achieve basically the same thing in different ways: namely modification of the output data.
Formatting functions for export buttons are specified by assigning a function to one (or more) of the format object of the
exportOptions object. Three formatting functions can be used: header, footer and body. This is the primarily
advantage of using formatting functions over orthogonal data - the header and footer can also be formatted using this method (of course orthogonal and this
formatting function method can both be used together if you prefer!).
This example uses a body formatting function to remove the $ and , characters from the final column to make it a numeric
value in the output data. Since this is common to all three export buttons used, the function is placed into an object that is reused by each button - simply to
save repeating the same code! This is not required, but it can be a useful technique.
| Name | Position | Office | Extn. | Start date | Salary |
|---|---|---|---|---|---|
| Name | Position | Office | Extn. | Start date | Salary |
| Loading... | |||||
The Javascript shown below is used to initialise the table shown in this example:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | $(document).ready(function() { var buttonCommon = { exportOptions: { format: { body: function ( data, row, column, node ) { // Strip $ from salary column to make it numeric return column === 5 ? data.replace( /[$,]/g, '' ) : data; } } } }; $('#example').DataTable( { ajax: '../../../../examples/ajax/data/objects.txt', columns: [ { data: 'name' }, { data: 'position' }, { data: 'office' }, { data: 'extn' }, { data: 'start_date' }, { data: 'salary' } ], dom: 'Bfrtip', buttons: [ $.extend( true, {}, buttonCommon, { extend: 'copyHtml5' } ), $.extend( true, {}, buttonCommon, { extend: 'excelHtml5' } ), $.extend( true, {}, buttonCommon, { extend: 'pdfHtml5' } ) ] } );} ); |
In addition to the above code, the following Javascript library files are loaded for use in this example: