Manipulate column in datatable row - datatables

Question

I m using datatable to load data from the database. there is a datetime column that I want to Manipulate. So basically I want to use moment-js and convert datetime into the user's locale time and etc.
I tried createdRow however that event is called after data has been inserted into the rows.
is there beforeCreatedRow row type event so that I can Manipulate data before inserting it into a row?
$("#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 is the code.
thank you.

Answer 1

To manipulate the data before its shown, my preferred approach is to use columns. render. It's not immediately obvious from the doc, but you can also pass a function to render:
...
"columnDefs": [ {
"targets": 4,
"data": "datetime",
"render": function ( data, type, row, meta ) {
return data = '2222-22-22 11:11:11'//test;
}
...

Answer 2

You can actually do this in the column initialization. Here you go:
$("#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');
}
}
]
});
Here is a working example with some sample data:
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>