操作数据表行中的列答案

【问题标题】：Manipulate column in datatable row操作数据表行中的列
【发布时间】：2021-10-05 19:53:05
【问题描述】：

我正在使用数据表从数据库中加载数据。有一个 datetime 列我想操纵。所以基本上我想使用moment-js并将datetime转换为用户的语言环境时间等等。我尝试了 createdRow ，但是在将数据插入行后调用了该事件。是否有 beforeCreatedRow 行类型事件，以便我可以在将数据插入行之前对其进行操作？

            $("#ronin").DataTable({
            "order": [
                [0, "desc"]
            ],
            ajax: {
                url: "r1.php",
                dataSrc: ''
            },
            colReorder: {
                realtime: true
            },
            createdRow: function(row, data, dataIndex) {
                console.log(data.datetime);
                return data.datetime = '2222-22-22 11:11:11'//test
            },
            "aoColumns": [{
                    data: 'id'
                },
                {
                    data: 'seed'
                },
                {
                    data: 'useragent'
                },
                {
                    data: 'ip'
                },
                {
                    data: 'datetime'
                }
            ]
        });

这是代码。

谢谢。

【问题讨论】：

你可以看到一个例子here展示了如何使用moment-js的列渲染函数来操作数据。
还有各种 Stack Overflow 问题和答案，讨论如何使用 moment-js 在时区之间转换 - 例如，here。

标签： datatables datatables-1.10

【解决方案1】：

要在数据显示之前对其进行操作，我首选的方法是使用columns. render。从文档中不是很明显，但您也可以pass a function 进行渲染：

...

  "columnDefs": [ {
    "targets": 4,
    "data": "datetime",
    "render": function ( data, type, row, meta ) {
      return data = '2222-22-22 11:11:11'//test;
    }
...

【讨论】：

【解决方案2】：

您实际上可以在列初始化中执行此操作。给你：

$("#ronin").DataTable({
        "order": [
            [0, "desc"]
        ],
        ajax: {
            url: "r1.php",
            dataSrc: ''
        },
        colReorder: {
            realtime: true
        },
        createdRow: function(row, data, dataIndex) {
            console.log(data.datetime);
            return data.datetime = '2222-22-22 11:11:11'//test
        },
        "aoColumns": [{
                data: 'id'
            },
            {
                data: 'seed'
            },
            {
                data: 'useragent'
            },
            {
                data: 'ip'
            },
            {
                data: 'datetime',
                render: function(data, type, row) {
            if (type === "sort" || type === "type") {
                return data;
            }
                return moment(data).format('YYYY-MM-DD h:mm:ss A');
            }
            }
        ]
    });

这是一个带有一些示例数据的工作示例：

var dataSet = [{
"id" : "123591345",
"seed": "543694385672452",
"useragent": "Not sure what this is",
"ip": "199.99.919.1",
"datetime": "7/30/2021"
}];
 
$(document).ready(function() {
moment.suppressDeprecationWarnings = true; //suppresses deprecation notifications in console
    $('#example').DataTable( {
        data: dataSet,
        columns: [
            { data: "id" },
            { data: "seed" },
            { data: "useragent" },
            { data: "ip" },
            { data: "datetime",
             render: function(data, type, row) {
                if (type === "sort" || type === "type") {
                    return data;
                }
                    return moment(data).format('YYYY-MM-DD h:mm:ss A');
                }
                }
        ]
    } );
} );

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.1/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.25/css/dataTables.bootstrap5.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.7.1/css/buttons.bootstrap5.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/datetime/1.1.0/css/dataTables.dateTime.min.css"/>
 
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.1/js/bootstrap.bundle.min.js"></script>

<script type="text/javascript" src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.25/js/dataTables.bootstrap5.min.js"></script>

<script type="text/javascript" src="https://cdn.datatables.net/datetime/1.1.0/js/dataTables.dateTime.min.js"></script>

<script src="https://momentjs.com/downloads/moment.min.js"></script>


<table id="example" class="table table-bordered" cellspacing="0" width="100%">
<thead>
  <tr> 
    <th>ID</th>
    <th>Seed</th>
    <th>Useragent</th>
    <th>IP</th>
    <th>DateTime</th>
  </tr>
</thead>
</table>

【讨论】：