如何从数据表中的最新日期和时间排序

Question

我在对数据表中的日期和时间进行排序时遇到了问题。实际排序结果是这样的

Jan 13, 2021 12:03 PM
Jan 13, 2021 11:30 AM
Jan 13, 2021 09:03 AM
Jan 13, 2021 08:32 PM <-- Must be on top
Jan 13, 2021 06:33 AM
Jan 13, 2021 01:15 PM <-- Must be 2nd on top

结果没有按照最近时间排序。不分上午下午，按数字排序。

HTML代码

<table class="table table-bordered" id="example" width="100%" cellspacing="0">
     <thead>
         <th class="text-center">Name</th>
         <th class="text-center">Date & Time Filled</th>
     </thead>
     <tbody>
          @foreach($users as $user)
          <tr>
              <td>{{ $user->name}}</td>
              <td>{{ date('M d, Y h:i A', strtotime($user->created_at)) }}</td>
          </tr>
          @endforeach
     </tbody>
</table>

我的javascript

$(document).ready(function() {
   $('#example').DataTable( {
      "order": [[ 1, "desc" ]] //sort code
   });
});

laravel

中的控制器代码

$users:: User::latest('created_at')->get();

Answer 1

一种方法是使用 moment.js 库，它可以包含在您的页面中，如下所示：

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.27.0/moment.min.js"></script>

然后，出于测试目的，我使用以下测试 JSON 数据。这存储在我的测试中的 JavaScript 变量中，但可以像您在问题中所做的那样轻松地从服务器加载：

var dataSource = [
  { "user": "Alfa", "created_at": "2021-01-13 12:03:00" },
  { "user": "Bravo", "created_at": "2021-01-13 11:30:00" },
  { "user": "Charlie", "created_at": "2021-01-13 09:03:00" },
  { "user": "Delta", "created_at": "2021-01-13 20:32:00" },
  { "user": "Echo", "created_at": "2021-01-13 06:33:00" },
  { "user": "Foxtrot", "created_at": "2021-01-13 13:15:00" }
];

我的测试 table 有两列：

    <table id="example" class="display dataTable cell-border" style="width:100%">
        <thead>
            <tr>
                <th>User</th>
                <th>DateTime</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>

最后，我的 DataTables 定义使用 moment.js 为每个日期创建两个版本：

显示日期：Jan 13, 2021 8:32 PM
相关排序日期（原始 JSON 数据）：2021-01-13 20:32:00

DataTable中的render函数使用显示日期在HTMLtable中显示，并使用相关的原始日期值进行排序。

$('#example').DataTable( {
  "data": dataSource,
  "order": [[ 1, "desc" ]],
  "columnDefs":[
  { targets: 0, data: "user" },
  { targets: 1, data: "created_at",
    render: function ( data, type, row ) {
      var datetime = moment(data, 'YYYY-MM-DD HH:mm:ss');
      var displayString = moment(datetime).format('MMM DD, YYYY LT');
      if ( type === 'display' || type === 'filter' ) {
        return displayString;
      } else {
        return datetime; // for sorting
      }
    }
  }]
  } );

} );

最后的结果是：

更新

假设您的数据已经加载到 HTML table（例如通过 Laravel），那么您的 DataTables 定义可以被简化。

$('#example').DataTable( {
  "order": [[ 1, "desc" ]],
  "columnDefs":[
  { targets: 1,
    render: function ( data, type, row ) {
      var datetime = moment(data, 'YYYY-MM-DD HH:mm:ss');
      var displayString = moment(datetime).format('MMM DD, YYYY LT');
      if ( type === 'display' || type === 'filter' ) {
        return displayString;
      } else {
        return datetime;
      }
    }
  }]
  } );

如何从数据表中的最新日期和时间排序

How to sort from latest date and time in datatables

datatable

datatables

laravel-7