jquery datatables：将计算的持续时间添加到列

Question

我在数据表的某一列中显示日期和时间，并希望用于计算持续时间。我怎样才能在数据表上实现这一点

我想计算从每一行的日期时间到当前日期时间的活动，并将其添加到查询类型列中。

这是我目前所拥有的：

$('#datatable').DataTable( {
        //"ajax": "data/arrays.txt"
        "processing": true,
        "serverSide": false,
        "searching": false,
        'serverMethod': 'post',
        'ajax': {
            'url': "php/testing.php",
            'data': function(data){
                data.tasksts = "Open"
        }
        },
        "columns": [
            { data: 'taskid', "visible": false },          
            { data: 'activefrom' },
            { data: 'querytype' }
        ]
    });

Answer 1

要在 JS 中实现这一点，您可以使用 Datatable 的 render 属性来计算一个值并在表格的每一行显示它。

更棘手的部分是将 DD-MM-YYYY 格式转换为 MM-DD-YYYY 以便 JS 可以将其转换为 Date 对象 (ref)，然后将结果格式化为 HH:MM： SS 值 (ref)。

试试这个：

$('#datatable').DataTable({
  "processing": true,
  "serverSide": false,
  "searching": false,
  // AJAX removed for this example
  "columns": [{
    data: 'taskid',
    visible: false
  }, {
    data: 'activefrom'
  }, {
    data: null,
    render: (data, type, row) => {
      let from = new Date(dmyToDate(data['activefrom']));
      let diffSecs = Math.abs((new Date().getTime() - from.getTime()) / 1000);
      return secondsToDhms(diffSecs);
    }
  }]
});

// Amended from: https://*.com/a/64454486/519413
function dmyToDate(dateStr) {
  let arr = dateStr.split(' ');

  let dateArr = arr[0].split('-');
  let dd = (dateArr[0] || '').padStart(2, '0');
  let mm = (dateArr[1] || '').padStart(2, '0');
  let yyyy = (dateArr[2] || '').padStart(2, '0');

  let timeArr = arr[1].split(':');
  let hh = (timeArr[0] || '').padStart(2, '0');
  let mi = (timeArr[1] || '').padStart(2, '0');
  let secs = (timeArr[2] || '').padStart(2, '0');
  mm = (parseInt(mm) - 1).toString(); // January is 0    
  return new Date(yyyy, mm, dd, hh, mi, secs);
}

// https://*.com/a/52387803/519413
function secondsToDhms(seconds) {
  seconds = Number(seconds);
  let d = Math.floor(seconds / (3600 * 24));
  let h = Math.floor(seconds % (3600 * 24) / 3600);
  let m = Math.floor(seconds % 3600 / 60);
  let s = Math.floor(seconds % 60);

  let dDisplay = d > 0 ? d + (d == 1 ? " day, " : " days, ") : "";
  let hDisplay = h > 0 ? h + (h == 1 ? " hour, " : " hours, ") : "";
  let mDisplay = m > 0 ? m + (m == 1 ? " minute, " : " minutes, ") : "";
  let sDisplay = s > 0 ? s + (s == 1 ? " second" : " seconds") : "";
  return dDisplay + hDisplay + mDisplay + sDisplay;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.24/css/jquery.dataTables.min.css" />
<table id="datatable">
  <thead>
    <tr>
      <th>TaskID</th>
      <th>Active from</th>
      <th>Query type</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Foo</td>
      <td>23-03-2021 10:54</td>
      <td>Foo</td>
    </tr>
    <tr>
      <td>Bar</td>
      <td>25-03-2021 15:25</td>
      <td>Bar</td>
    </tr>
  </tbody>
</table>