javascript - 如何将自定义列添加到数据表中,其值来自其他两个字段的时差

标签 javascript jquery datatables

我有一个包含许多字段和两个日期字段的 MySQL 表 created_atupdated_at

我想要 DataTables 中的一列具有这两个字段之间的时间差。

我正在为数据表和 ssp.class.php 使用选项 serverSide:true

下面是我的代码。

 <?php
    error_reporting("E_ALL");
    if (isset($_GET['ajax'])) {
        $table = 'table_here';
        // Table's primary key
        $primaryKey = 'id';
        // Array of database columns which should be read and sent back to DataTables.
        // The `db` parameter represents the column name in the database, while the `dt`
        // parameter represents the DataTables column identifier. In this case simple
        // indexes
        $columns = array(
                array('db' => 'type', 'dt' => 0),
                array('db' => 'uniqueid', 'dt' => 1),
                array('db' => 'created_at', 'dt' => 8),
                array('db' => 'updated_at', 'dt' => 9), );
        require('ssp.class.php');
        echo json_encode(
            SSP::simple($_GET, $sql_details, $table, $primaryKey, $columns));
        exit();
    }
?>
$(document).ready(function () {
    const table = $('#example').DataTable({
            "columnDefs": [{
                    "targets": [7],
                    "visible": false,
                }
            ],
            "processing": true,
            "serverSide": true,
            "ajax": "url"
        });
});

最佳答案

您可能希望为此目的使用 columns.render,例如:

const dataTables = $('#mytable').DataTable({
      ...
      columns: [
        ...
        {title: 'delta', data: null, render: (data, type, row, meta) => {
            //translate your timestamp strings into actual Date 
            const created = new Date(row.created);
            const updated = new Date(row.updated);
            //calculate the difference in seconds and return as a cell contents
            return Math.round((updated-created)/1000);
          }
        }
      ]
    });

您可以在下面找到演示

//sample source data
const dataSrc = [
  {id: 1, created: '16 Apr 2019, 16:10:15', updated: '16 Apr 2019, 16:15:21'},
  {id: 2, created: '16 Apr 2019, 16:15:08', updated: '16 Apr 2019, 16:25:18'},
  {id: 3, created: '16 Apr 2019, 16:20:01', updated: '16 Apr 2019, 16:21:15'}
];
//DataTables initialization
const dataTables = $('#mytable').DataTable({
  dom: 't',
  data: dataSrc,
  columns: [
    {title: 'id', data: 'id'},
    {title: 'created', data: 'created'},
    {title: 'updated', data: 'updated'},
    {title: 'delta', data: null, render: (data, type, row, meta) => {
      const created = new Date(row.created);
      const updated = new Date(row.updated);
      return Math.round((updated-created)/1000);
      }
    }
  ]
});
<!doctype html>
<html>
<head>
  <script type="application/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script type="application/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
</head>
<body>
<table id="mytable"></table>
</body>
</html>

关于javascript - 如何将自定义列添加到数据表中,其值来自其他两个字段的时差,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55705432/

相关文章:

javascript - 图表.org : how to draw scatterplots with full circle as symbol?

jquery - 使用 Magnific Popup 仅显示具有特定类别或 ID 的图像

Jquery 文件上传以编程方式删除文件

jquery - 如何在Ajax加载数据表中使用回调函数?

javascript - Angular Material : Nested grid

javascript - 主干路由器事件

javascript - 如何获取鼠标输入的元素ID?

datatables - 更改要显示在一个上的默认行数 "page"

javascript - 德鲁巴 : how to add a JavaScript file in Ctools modal popup

javascript - MongoDB 文档中的歧义-Model.find()