How can I change all tableHeader values to uppercase in dataTables at export time in jQuery

1.4k Views Asked by At

How can I change all tableHeader values to uppercase in dataTables at export time using jQuery?

$('#tableFormData').DataTable({
  "stateSave": true,
  dom: 'Bfrtip',
  buttons: [{
    extend: 'pdfHtml5',
    title: 'Form Data.',
    orientation: 'landscape',
    pageSize: 'A4',
    pageMargins: [0, 0, 0, 0], // try #1 setting margins
    margin: [0, 0, 0, 0], // try #2 setting margins
    text: '<u>E</u>xport Page (PDF)',
    key: { // press E for export PDF
      key: 'e',
      altKey: false
    },
    content: [{
      style: 'fullWidth'
    }],
    styles: { // style for printing PDF body
      fullWidth: {
        fontSize: 18,
        bold: true,
        alignment: 'right',
          margin: [0, 0, 0, 0]
        }
      },
      download: 'download',
      exportOptions: {
        modifier: {
          pageMargins: [0, 0, 0, 0], // try #3 setting margins
          margin: [0, 0, 0, 0], // try #4 setting margins
          alignment: 'center'
        },
        body: {
          margin: [0, 0, 0, 0],
          pageMargins: [0, 0, 0, 0]
        } // try #5 setting margins         
        /* , columns: [0,1] */ //column id visible in PDF    
        ,
        columnGap: 1 // optional space between columns
      }
    },
    'copy', 'csv', 'excel' //'pdf'  
  ]
});
1

There are 1 best solutions below

0
On

You can use the format.header function (which is one of the available exportOptions, provided by the Buttons add-on) to do this:

format: {
  header: function ( data, columnIdx ) {
    return data.toUpperCase();
  }
}

So, in your case, you can add this to your existing exportOptions section:

exportOptions: {

  format: {
    header: function ( data, columnIdx ) {
      return data.toUpperCase();
    }
  },

  modifier: {
    pageMargins: [0, 0, 0, 0], // try #3 setting margins
    margin: [0, 0, 0, 0], // try #4 setting margins
    alignment: 'center'
  },
  ...
}