动态添加日期作为带有名称和 ID 的列标题答案

【问题标题】：Dynamically add date as column header with name and id动态添加日期作为带有名称和 ID 的列标题
【发布时间】：2020-11-05 19:25:43
【问题描述】：

我一直在关注本指南 Dynamically add date as column header，但我的问题是我无法添加新列，我想添加 Name、Age 和 Section 在动态日期之前。

有没有办法做到这一点？

基于此DEMO。

<script>
$(document).ready(function() {

    var dataset = [
    { 
       Name: 'John',
       Age: '21',
       Section : 'One',
        dateData_1: 'Date A1',
      dateData_2: 'Date A2',
      dateData_3: 'Date A3',
      dateData_4: 'Date A4',
      dateData_5: 'Date A5',
    },
    { 
       Name: 'Doe',
       Age: '22',
       Section : 'Two',
        dateData_1: 'Date B1',
      dateData_2: 'Date B2',
      dateData_3: 'Date B3',
      dateData_4: 'Date B4',
      dateData_5: 'Date B5',
    },
    { 
       Name: 'Smith',
       Age: '23',
       Section : 'Three',
        dateData_1: 'Date C1',
      dateData_2: 'Date C2',
      dateData_3: 'Date C3',
      dateData_4: 'Date C4',
      dateData_5: 'Date C5',
    },
    { 
       Name: 'Mark',
       Age: '24',
       Section : 'Four',
        dateData_1: 'Date D1',
      dateData_2: 'Date D2',
      dateData_3: 'Date D3',
      dateData_4: 'Date D4',
      dateData_5: 'Date D5',
    },
    { 
       Name: 'Kane',
       Age: '25',
       Section : 'Five',
        dateData_1: 'Date E1',
      dateData_2: 'Date E2',
      dateData_3: 'Date E3',
      dateData_4: 'Date E4',
      dateData_5: 'Date E5',
    }
  ]

    var columns = [];  
  for (var i = 1; i <= 5; i++) {    
    var date = new Date(2019,1,i);
    columns.push({
        title: date.getDate() + '/' + (date.getMonth() + 1) + '/' + date.getFullYear(),
      data: 'dateData_' + i
    });
  }

  var myTable = $('#example').DataTable({    
    data: dataset,
    columns: columns
  });

});
</script>

<div class="container">
  <table id="example">
    <thead></thead>
    <tbody></tbody>
  </table>
</div>

我想在动态日期、Name、Age和Section列之前添加循环，

提前谢谢你。

【问题讨论】：

标签： javascript html jquery ajax datatable

【解决方案1】：

您正在填充数据源数组，但完全忘记填充列列表。只需将 Name、Age 和 Section 添加到“columns”数组中即可！

  var columns = [
    { title: "Name", data: 'Name' },
    { title: "Age", data: 'Age' },
    { title: "Section", data: 'Section' }
  ];

这里是一个例子：http://jsfiddle.net/pzxgbqdf/

【讨论】：