javascript - 在 Javascript/Jquery 的数据表列中将日期格式设置为 dd/mm/yyyy

Question

我在数据表的第一列中有一个日期，我需要它可以按日期排序。问题是，当我将其格式化为 dd/mm/yyyy 时，列将作为字符串排序，并且不考虑月份，它仅按字符串中第一个字符的日排序。

那么表中的数据可能会显示为:

<小时/>

2019年11月5日

2019年10月9日

2019年10月11日

2019年9月21日

<小时/>

而且不正确。

我用来格式化的代码是dd/mm/yyyy，是这样的:

JS

function formatDate(date) {
    var d = new Date(date),
        month = '' + (d.getMonth() + 1),
        day = '' + d.getDate(),
        year = d.getFullYear();

    if (month.length < 2)
        month = '0' + month;
    if (day.length < 2)
        day = '0' + day;

    return [day, month, year].join('-');
}

将其附加到表中的代码是这样的:

JS

$tblRow.append('<td style="text-align: center;" id="td' + i + '">' + formatDate(ordersList[i][4]) + '</td>');

如何将其格式化为 dd/mm/yyyy 并且可以按日和月排序。

Answer 1

您可以使用mRender函数以dd/mm/yyyy格式显示日期，并将列类型仅保留为date，以便通过默认情况下，它将按日期排序。

$("#example").dataTable({
  "aaData":[
  ["2013-10-15 10:30:00"],
  ["2014-01-10 12:00:00"],
  ["2013-09-10 12:00:00"],
  ["2018-01-10 12:00:00"],
  ["2013-01-10 12:00:00"]
  ],
  // property decides how each column will be rendered in table 
  "aoColumnDefs":[
  
  {
    "aTargets":[0]
    , "sType": "date" // type of the column
    , "mRender": function(d, type, full) {
      d = new Date(d);      
      month = '' + (d.getMonth() + 1),
      day = '' + d.getDate(),
      year = d.getFullYear();

      if (month.length < 2)
        month = '0' + month;
      if (day.length < 2)
        day = '0' + day;

      return [day, month, year].join('-');
    }  
  }
  ]
});

<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"></script>
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css">
<table id="example">
  <thead>
    <tr><th>Dates</th></tr>
  </thead>
  <tbody>
  </tbody>
</table>