How to customize jquery datatables export such as PDF Excel Print and CSV?

Question

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.

Pseudo

Hello Jayz, there is no plugin in dataTable to export data in PDF, CSV or Excel. if you want export data then you need to build external function for these. and data selection query is same as datatable data selection query. export data in CSV, PDF or excel various plugin available online. – Canea

Answer 1

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 :

• excel options
• csv options
• pdf options
• print 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>

Effectual

Thanks! This helped a lot! But can I ask one more thing about datatables? – Pseudo

Looks like there are some duplicate script tags in your snippet. – Fingerboard

Is there any way to exclude some of the columns? Are hidden columns also included? – Fregoso

@Fregoso you can make use of column-selector to select which columns you want to export or vice-versa. For more info please see this example – Effectual