数据表 - 从 Mysql 数据：字符串转换为使用 moment.js 的日期对象

如何解决数据表 - 从 Mysql 数据：字符串转换为使用 moment.js 的日期对象

我在名为“date_fld”的 MysqL 列中将日期字段作为字符串（文本类型）。

在MysqL列中为字符串格式，如下所示：31.12.2021

使用 PHP 和 JS / moment.js，我想将此字符串格式转换为日期对象，以便按实际日期对 DataTables 标头进行排序。

我不确定，该怎么做？

## Fetch records
      $this->db->select('*');
      $records = $this->db->get('data2')->result();

      $data = array();

      foreach($records as $record ){
         
          $data[] = array( 
            "#"=>$record->id,"Date"=>$record->date_fld
          ); 
      }

      ## Response
      $response = array(
          "draw" => intval($draw),"iTotalRecords" => $totalRecords,"iTotaldisplayRecords" => $totalRecordwithFilter,"aaData" => $data
      );

      return $response; 
    }

数据表：

$(document).ready(function(){
        $.fn.dataTable.moment('DD.MM.YYYY');
...

{ data: 'date_fld',render: function (data,type,row) {
      return moment(new Date(data)).format('DD.MM.YYYY');
    }
}

解决方法

如果您已正确设置 JavaScript 脚本，则只需使用以下代码行：

$.fn.dataTable.moment('DD.MM.YYYY');

这样，您就不需要提供渲染函数或对 moment.js 函数的任何显式引用。

分步说明：

在 HTML 页面的 <head> 中，我在标准 jQuery 和 DataTables 脚本之后包含以下两个脚本：

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.27.0/moment.min.js"></script>
<script src="https://cdn.datatables.net/plug-ins/1.10.22/sorting/datetime-moment.js"></script>

第一个脚本用于 moment.js 库。

第二个脚本是 DataTables date-time plugin，它使用 moment.js。

正是这第二个脚本允许您使用 $.fn.dataTable.moment()。

我的测试表如下所示：

<table id="example" class="display dataTable cell-border" style="width:100%"></table>

我的 DataTables 脚本如下：

// This is my test data (you get your data from the database,of course):
var dataSet = [
  [ "Tiger Nixon","System Architect","Edinburgh","5421","21.12.2021","$320,800" ],[ "Garrett Winters","Accountant","Tokyo","8422","20.12.2021","$170,750" ],[ "Ashton Cox","Junior Technical Author","San Francisco","1562","31.01.2021","$86,000" ],[ "Sonya Frost","Software Engineer","1667","01.02.2021","$103,600" ],[ "Cedric Kelly","Senior Javascript Developer","6224","31.01.2020","$433,060" ]
];
 
$(document).ready(function() {

  $.fn.dataTable.moment('DD.MM.YYYY');

  $('#example').DataTable( {
    data: dataSet,columns: [
      { title: "Name" },{ title: "Position" },{ title: "Office" },{ title: "Extn." },{ title: "Start date" },{ title: "Salary" }
    ]
  } );
} );

结果

现在我可以看到以 DD.MM.YYYY 格式显示的日期 - 但它们是按时间顺序排列的：

这是有效的，因为 DataTables 日期时间插件为您做两件事：

(a) 它使用您提供的日期格式 (DD.MM.YYYY)，并自动检测您的数据使用此格式的所有单元格。它为您将这些值从文本转换为日期对象。但是，它使用您的格式来显示表格中的日期数据。

(b) DataTables 日期时间插件自动构建每个日期值的第二个版本，专门用于排序。在幕后，它使用 moment().unix() 来构建这种可排序的日期格式。

因此，您会看到使用首选格式在表格中显示的日期，但是当您对该列进行排序时，DataTables 使用另一种格式。

您不需要使用任何 moment.js 函数，也不需要以任何明确的方式操作日期数据进行排序。一切尽在您的掌握之中。

如果您想避免使用 DataTables 插件，您可以使用直接依赖于 moment.js 的自定义方法：

删除 $.fn.dataTable.moment('DD.MM.YYYY'); 行。
更改日期列以使用渲染器：

      { title: "Start date",render: function ( data,type,row ) {
          //console.log(data); // the raw date as a string
          var d = moment(data,'DD.MM.YYYY'); // converted to a moment object
          var sortString = moment(d).format('YYYYMMDD'); // converted to a new string format
          //console.log(sortString);
          if ( type === 'display' || type === 'filter' ) {
            return data;
          } else {
            return sortString; // this version of the date will be used for sorting
          }
        }
      },

现在，我们正在构建我们自己的日期可排序版本，而不是将它留给 DataTables 插件。