DataTables 插件中的列顺序不会改变

Question

我想反转从 DataTables 导出数据的列。我正在寻找方法，最终以这种方式结束：

$(document).ready(function(){
            var arrayCol = new Array();
            var table = $('#example').DataTable({
                dom: 'Bfrtip',
                initComplete:function (  ) {
                    var len = this.api().columns().count();
                    var array =  Array.from(Array(len).keys())
                    arrayCol = array.reverse();
                  },
            buttons: [
                {
                    extend: 'excelHtml5',
                     exportOptions: {
                            columns: ':visible:not(.not-export-col)',
                             orthogonal: 'export'
                             
                        }
                },
               {
                   extend: 'pdfHtml5',
                   orientation: 'landscape',
                   pageSize: 'A4',
                    exportOptions: {
                
                    columns: arrayCol, // this doesn't work
                     //columns:[5,4,3,2,1,0], //this work
                        orthogonal: 'export'
                    
                   }
                    
                    
               }
    ]
                });
        });

调试时var arrayCol 有值，但导出为 PDF 时 PDF 没有任何列。

也许它没有分配给列或类似的东西。

Answer 1

我认为最简单的方法是在导出数据时反转每个单独的行数组。您可以使用exportOptions.rows 来执行此操作。

您还需要反转标题，这可以使用exportOptions.format.heeader 完成。在这种情况下，您一次只能访问一个标头字段，因此需要更多的工作来构建一个反向的标头值数组，然后访问该数组中的每个索引位置：

$(document).ready(function() {

  var table = $('#example').DataTable( {
    dom: 'Bfrtip',
    buttons: [
      { 
        extend: 'pdf',
        text: 'To PDF',
        exportOptions: {
          rows: function ( idx, data, node ) {
            return data.reverse();
          },
          format: {
            header: function ( data, idx, node ) {
              var headers = $('#example').DataTable().table().header();
              var reversedHeaders = headers.innerText.split('\t').reverse();
              return reversedHeaders[idx];
            }
          }
        }
      }
    ]
  } );

} );

参考资料：

• export options
• row selectors - function