DataTables

DataTables Examples

HTML

<link rel="stylesheet" href="//cdn.datatables.net/1.10.0/css/jquery.dataTables.css">
<script src="https://cdn.datatables.net/1.10.9/js/jquery.dataTables.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.js"></script>
<script src="http://cdn.datatables.net/plug-ins/1.10.19/sorting/datetime-moment.js"></script>
<table id="example">
  <thead>
    <tr>
      <th>Date</th>
      <th>Date</th>
    </tr>
  </thead>
</table>

JavaScript

var data = [
    {"dateInserted":'2021-12-29T08:37:12.57'},
    {"dateInserted":'2021-12-29T08:34:42.6066667'},
    {"dateInserted":'2022-01-04T15:23:25.193523-06:00'},
    {"dateInserted":'2022-01-05T15:23:25.1935271-06:00'},
    {"dateInserted":'2022-01-06T15:23:25.1935274-06:00'},
    {"dateInserted":'2022-01-07T15:23:25.1935277-06:00'},
    {"dateInserted":'2021-12-30T09:15:09.9866667'},
    {"dateInserted":'2022-01-03T14:48:31.8633333'},
    {"dateInserted":'2022-01-08T15:23:25.193528-06:00'}
  ];
  
  
let dateFormat = 'ddd, MMM Do h:mm A';
$.fn.dataTable.moment(dateFormat);    
var table = $('#example').DataTable({
  data: data,
  order: [[1, 'asc'], [0, 'asc']],
  columns: [
    { 
      data:"dateInserted",
      render: function (data, type, row) {
        return moment(data).format(dateFormat);
      }
    },
    { 
      data:"dateInserted",
      render: function (data, type, row) {
      if (type === 'display' || type === 'filter') {
        return moment(data).format(dateFormat);
        }
        return data;
      }
    } ],
  initComplete: function (settings) {
  console.log('column 0 type:', settings.aoColumns[0].sType);
  console.log('column 1 type:', settings.aoColumns[1].sType);
  console.log('Sort Data:', settings.aoData[0]._aSortData);  }
});