I am using a jQuery DataTables from datatables. I want to customize the export files plugin of those tables such as CSV, Excel, PDF and the Print button. If I print a PDF it always said in the header the title of the jQuery Data Table file export. How can I customize that? I also want to customize the file name when I export the CSV, PDF and Excel file. I checked the code in the plugins and I can't see the code in the options for export file to customize it. Do I need an extension to download? Sorry I am just new to jQuery datatables.
Here is an example below
How can I customize that and same for the PDF,CSV and Excel file. Sorry for the bad editing.
How can I also customize the filename being downloaded?
Appreciate if someone can help.
Thanks in advance.
You can turn a DataTable into an Excel worksheet with some very readable code: XLWorkbook wb = new XLWorkbook(); DataTable dt = GetDataTableOrWhatever(); wb. Worksheets. Add(dt,"WorksheetName");
You need to tell the AJAX function to get all data, then do the export but cancel the actual draw so that all of that data isn't loading into the DOM. The full data will still exist in memory for the DataTables API though, so you need to refresh it to the way it was before the export. Save this answer.
You can customise filename and title using buttons options. All buttons contains options to customise filename
and title
except csv button
. csv button
only have filename
option.
Below is the list of references of buttons options :
Here is the snippet.
$(document).ready(function() {
$('#example').DataTable({
dom: 'Bfrtip',
buttons: [{
extend: 'pdf',
title: 'Customized PDF Title',
filename: 'customized_pdf_file_name'
}, {
extend: 'excel',
title: 'Customized EXCEL Title',
filename: 'customized_excel_file_name'
}, {
extend: 'csv',
filename: 'customized_csv_file_name'
}]
});
});
<link href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.css" rel="stylesheet" />
<link href="https://cdn.datatables.net/buttons/1.2.2/css/buttons.dataTables.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.4.2/js/dataTables.buttons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/1.4.2/js/buttons.html5.min.js"></script>
<div class="container">
<table id="example" class="display nowrap" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$3,120</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Director</td>
<td>Edinburgh</td>
<td>63</td>
<td>2011/07/25</td>
<td>$5,300</td>
</tr>
</tbody>
</table>
</div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With