简体   繁体   English

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

[英]Datatables date sort vs date display

I am using Datatables to display a table and I am pulling a list of datestimes from a MySQL database.我正在使用数据表来显示一个表,我正在从 MySQL 数据库中提取日期时间列表。 These date times are not standard dates and look like this:这些日期时间不是标准日期,如下所示:

12/30/19 @ 04:17 pm

How can I sort these accurately with Datatables?如何使用 Datatables 对这些进行准确排序?

Here is my code:这是我的代码:

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'
  }];
}

I need to sort bookingdatetime , pickupdatetime , dropdatetime accurately (they are currently being converted into MM/DD/YY in the PHP script)我需要准确地对bookingdatetimepickupdatetimedropdatetime进行排序(它们目前正在 PHP 脚本中转换为 MM/DD/YY)

Maybe you can prepend hidden <span> elements containing the respective unix timestamps in the cells that have dates (by manually parsing the dates).也许您可以在具有日期的单元格中添加包含相应 unix 时间戳的隐藏<span>元素(通过手动解析日期)。 Then using such columns to sort alphabetically would practically sort time-wise.然后使用这些列按字母顺序排序实际上可以按时间排序。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM