数据表日期排序与日期显示

Posted 2023-05-07

【中文标题】数据表日期排序与日期显示

【英文标题】：Datatables date sort vs date display

【发布时间】：2020-06-20 19:16:39

【问题描述】：

我正在使用 Datatables 来显示一个表，并且我正在从 mysql 数据库中提取日期时间列表。这些日期时间不是标准日期，如下所示：

12/30/19 @ 04:17 pm

如何使用 Datatables 对这些进行准确排序？

这是我的代码：

getRes(function (result)  // APPLIED CALLBACK
  $('#resdatatable').DataTable(
     data: result,             // YOUR RESULT
     order: [[ 0, "desc" ]],
     autoWidth: false,
     responsive: true,
      columns: [
         data: 'id', title: 'ID' ,
         data: 'bookingdatetime', title: 'Booking Date' ,
         data: 'name', title: 'Name' ,
         data: 'class', title: 'Class' ,
         data: 'pickupdatetime', title: 'Pick up' ,
         data: 'duration', title: 'Duration' ,
         data: 'dropdatetime', title: 'Drop off' ,
         data: 'age', title: 'Age' ,
         data: 'coverage', title: 'Coverage' ,
         data: 'quote', title: 'Quote' ,
        
          data: 'status',
          title: 'Status',
          render: function(data, type, row) 
            let isKnown = statusList.filter(function(k)  return k.id === data; ).length > 0;
            if (isKnown) 
              return $('<select id="resstatus'+row.id+'" onchange="changeResStatus('+row.id+')" data-previousvalue="'+row.status+'">', 
                id: 'resstatus-' + row.id, // custom id
                value: data
              ).append(statusList.map(function(knownStatus) 
                let $option = $('<option>', 
                  text: knownStatus.text,
                  value: knownStatus.id
                );
                if (row.status === knownStatus.id) 
                  $option.attr('selected', 'selected');
                
                return $option;
              )).on('change', function() 
                changeresstatus(row.id); // Call change with row ID
              ).prop('outerhtml');
             else 
              return data;
            
          
        
      ]
    );
);

/**
 * jQuery plugin to convert text in a cell to a dropdown
 */
(function($) 
  $.fn.createDropDown = function(items) 
    let oldTxt = this.text();
    let isKnown = items.filter(function(k)  return k.id === oldTxt; ).length > 0;
    if (isKnown) 
      this.empty().append($('<select>').append(items.map(function(item) 
        let $option = $('<option>', 
          text: item.text,
          value: item.id
        );
        if (item.id === oldTxt) 
          $option.attr('selected', 'selected');
        
        return $option;
      )));
    
    return this;
  ;
)(jQuery);

// If you remove the renderer above and change this to true,
// you can call this, but it will run once...
if (false) 
  $('#resdatatable > tbody tr').each(function(i, tr) 
    $(tr).find('td').last().createDropDown(statusList);
  );



function getStatusList() 
  return [
    id: 'Confirmed',
    text: 'Confirmed'
  , 
    id: 'Unconfirmed',
    text: 'Unconfirmed'
  , 
    id: 'Communicating',
    text: 'Communicating'
  , 
    id: 'Open',
    text: 'Open'
  , 
    id: 'Closed',
    text: 'Closed'
  , 
    id: 'Canceled',
    text: 'Canceled'
  , 
    id: 'Reallocated',
    text: 'Reallocated'
  , 
    id: 'No Show',
    text: 'No Show'
  ];

我需要对bookingdatetime、pickupdatetime、dropdatetime进行准确排序（它们目前正在php脚本中转换为MM/DD/YY）

【问题讨论】：

这能回答你的问题吗？ How to sort by Date with DataTables jquery plugin?

@andrewjames - 不抱歉，我更新了我的问题以反映原因。

【参考方案1】：

也许您可以在具有日期的单元格中添加包含相应 unix 时间戳的隐藏 <span> 元素（通过手动解析日期）。然后使用这些列按字母顺序排序实际上会按时间排序。