Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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 belowenter image description here

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.

like image 995
Jaaayz Avatar asked Sep 29 '17 01:09

Jaaayz


People also ask

How do I export DataTables in Excel?

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");

How do I export all rows from DataTables using server side Ajax?

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.


1 Answers

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>
like image 74
Prashant Pokhriyal Avatar answered Sep 28 '22 10:09

Prashant Pokhriyal