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.

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. — Rajkumar Dorkhande
– Rajkumar Dorkhande, Commented Sep 29, 2017 at 1:51

Prashant Pokhriyal · Accepted Answer · 2017-12-12 18:10:26Z

7

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>

edited Dec 12, 2017 at 18:10

answered Sep 29, 2017 at 11:36

Prashant Pokhriyal

3,8474 gold badges33 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Jaaayz Over a year ago

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

thinktt Over a year ago

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

masud_moni Over a year ago

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

Prashant Pokhriyal Over a year ago

@masud_moni 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

Collectives™ on Stack Overflow

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

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related