动态添加日期作为列标题 [英] Dynamically add date as column header

问题描述

我想在我的数据表中包含动态列标题和列数据.例如，我有日期选择器，我选择了2019年2月10日至2019年2月12日之间的日期，因此我的数据表将具有

I want to have dynamic column header and column data in my data table. For example, I have date picker and I choose date between February 10, 2019 to February 12, 2019 So my data table will have

February 10, 2019 |  February 11, 2019 |  February 12, 2019 

作为列标题.如何实现此输出?

as column header. How to achieve this output?

这就是我构造数据表的方式

This is how I construct my datatable

$("#tblClients").DataTable({
  paginate: true,
  pagingType: "full_numbers",
  lengthChange: true,
  filter: true,
  info: true,
  autoWidth: false,
  columnDefs: [{
    autoWidth: true,
    "targets": [1]
  }, {
    "targets": [2, 3, 4, 5],
    "sortable": false
  }],
  "oSearch": {
    "bSmart": false
  },
  "dom": 'Bfrtip',
  "buttons": [{
    "extend": 'excelHtml5',
    "text": 'Download',
    "className": "btn btn-success",
  }],
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" />
<table id="tblClients" class="table table-hover table-bordered">
  <thead>
    <tr>
      <th>No.</th>
      <th>Client</th>
      <th>Name</th>
      <th>Email Address</th>
      <th>No. of Login</th>
      <th>Last Logon Time</th>
    </tr>
  </thead>
  <tbody>
    <?php foreach($logData as $key => $log): ?>
    <tr>
      <td>
        <?php echo $key+1; ?>
      </td>
      <td>
        <?php echo $log['client']; ?>
      </td>
      <td>
        <?php echo $log['name']; ?>
      </td>
      <td>
        <?php echo $log['email']; ?>
      </td>
      <td>
        <?php echo $log['counter']; ?>
      </td>
      <td data-sort="<?php echo $log['created']; ?>">
        <?php
          date_default_timezone_set('Asia/Manila');
          echo date(DATE_FORMAT.' H:i:s', strtotime($log['created']));
        ?>
      </td>
    </tr>
    <?php endforeach; ?>
  </tbody>
</table>

推荐答案

您可以使用 columns 选项的 title 属性动态设置数据表头:

You can use title property of columns option to set the datatable headers dynamically:

// Create a dynamic range of columns
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
});

选中此演示

这篇关于动态添加日期作为列标题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！