如何在 jQuery 导出时将 dataTables 中的所有 tableHeader 值更改为大写

Posted 2023-05-07

【中文标题】如何在 jQuery 导出时将 dataTables 中的所有 tableHeader 值更改为大写

【英文标题】：How can I change all tableHeader values to uppercase in dataTables at export time in jQuery

【发布时间】：2021-01-15 01:58:59

【问题描述】：

如何在导出时使用 jQuery 将 dataTables 中的所有 tableHeader 值更改为大写？

$('#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】：

您可以使用 format.header 函数（这是可用的 exportOptions 之一，由 Buttons 插件提供）来执行此操作：

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

因此，在您的情况下，您可以将其添加到您现有的 exportOptions 部分：

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'
  ,
  ...