jquery - 数据表日期排序dd/mm/yyyy问题

Question

它太棒了，但是我无法根据 dd/mm/yyyy 格式正确排序日期。

我查看了他们的支持格式，但这些修复似乎都不起作用。

有人可以帮我吗？

score 159 · Accepted Answer

2020 年更新：HTML 解决方案

由于 HTML 5 已经如此发达，几乎所有主流浏览器都支持它。所以现在更简洁的方法是使用HTML5 数据属性 （maxx777 提供了一个 PHP 解决方案，我使用的是简单的 HTML）。对于我们场景中的非数字数据，我们可以使用data-sort或data-order属性并为其分配一个可排序的值。

HTML

<td data-sort='YYYYMMDD'>DD/MM/YYYY</td>

这是有效的HTML解决方案

jQuery 解决方案

这是工作 jQuery 解决方案。

jQuery.extend( jQuery.fn.dataTableExt.oSort, {
"date-uk-pre": function ( a ) {
    var ukDatea = a.split('/');
    return (ukDatea[2] + ukDatea[1] + ukDatea[0]) * 1;
},

"date-uk-asc": function ( a, b ) {
    return ((a < b) ? -1 : ((a > b) ? 1 : 0));
},

"date-uk-desc": function ( a, b ) {
    return ((a < b) ? 1 : ((a > b) ? -1 : 0));
}
} );

将上述代码添加到脚本中，并将 Date 值 with { "sType": "date-uk" }和其他的特定列设置为 null，见下文：

$(document).ready(function() {
    $('#example').dataTable( {
        "aoColumns": [
            null,
            null,
            null,
            null,
            { "sType": "date-uk" },
            null
        ]
    });
    });

score 117 · Accepted Answer

日期排序 - 带有隐藏元素

将日期转换为格式YYYYMMDD并添加到实际值 ( DD/MM/YYYY ) 中<td>，将其包装在一个元素中，为元素设置样式display:none;。现在日期排序将像正常排序一样工作。这同样适用于日期时间排序。

HTML

<table id="data-table">
   <tr>
     <td><span>YYYYMMDD</span>DD/MM/YYYY</td>
   </tr>
</table>

CSS

#data-table span {
    display:none; 
}

score 43 · Accepted Answer

我知道这是一个老问题，答案也老了。最近我遇到了一种简单而干净的日期排序方式。它可以通过 HTML5data-order属性到<td>元素来完成。

这是我在 PHP 中所做的：

<?php
$newdate = date('d M Y', $myDateTime); // Format in which I want to display
$dateOrder = date('Y-m-d', $myDateTime); // Sort Order
?>

<td data-order="<?php echo $dateOrder; ?>" >
<?php echo $newdate; ?>
</td>

score 13 · Accepted Answer

试试这个插件。

如此处所述，您需要包含Moment.js和 datatable-moment 插件，然后只需声明您使用的日期格式。该插件将自动检测您的日期列并按应有的方式对其进行排序。有关 moment.js 格式的说明，请查看此处。

例子：

$(document).ready(function() {
    $.fn.dataTable.moment('DD/MM/YYYY HH:mm');
    $('#example').DataTable();
});

score 12 · Accepted Answer

这种方式对我有用。

<td data-order="@item.CreatedOn.ToString("MMddyyyyHHmmss")">
    @item.CreatedOn.ToString("dd-MM-yyyy hh:mm tt")
</td>

属性中的此日期格式data-order应采用 DataTable 支持的此格式。

score 6 · Accepted Answer

如果您不想使用momentum.js 或任何其他日期格式，您可以在日期值中添加以毫秒为单位的日期格式，以便按照毫秒进行排序。并隐藏毫秒日期格式。

示例代码：

var date = new Date();
var millisecond = Date.parse(date);

HTML

<td>'<span style="display: none;">' + millisecond + "</span>" + date + </td>

就是这样。

score 2 · Accepted Answer

另一种解决方案： https ://datatables.net/blog/2014-12-18

带有 2 个 JavaScript 库：

cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.min.js
cdn.datatables.net/plug-ins/1.10.15/sorting/datetime-moment.js

那么只有这个：

$(document).ready(function() {
   $.fn.dataTable.moment( 'DD/MM/YYYY' );
   $('#example').DataTable(); 
});

score 2 · Accepted Answer

您可以使用 php.ini 解决此问题。

$mydate = strtotime($startdate);
$newformat = date('d-m-Y',$mydate);
echo '<tr>';
echo '  <td data-sort="'. $mydate .'">'.$newformat .'</td>';

score 2 · Accepted Answer

虽然这个问题有很多答案，但我认为数据排序仅在“YYYYMMDD”中需要排序时才有效，并且在有小时/分钟时不起作用。使用数据排序时过滤器无法正常工作，至少我在尝试使用 React JS 时遇到了这个问题。

我认为最好的解决方案是使用数据顺序，因为可以动态提供值以用于排序目的，并且在显示时格式可以不同。该解决方案功能强大，适用于任何日期格式，包括“DD/MM/YYYY HH:M”。

例如：

<td data-order={obj.plainDateTime}>{this.formattedDisplayDate(obj.plainDateTime) }</td>

我从这里找到了这个解决方案 -如何按 DataTables 中的隐藏列排序？

score 1 · Accepted Answer

我试过这个并为我工作。

https://github.com/sedovsek/DataTables-EU-date-Plug-In

我使用了格式模式.ToString("dd/MM/yyyy");，然后在我的 jQuery.Datatable 中工作正常。

jQ 下面

oTable = $('#grid').dataTable({
    "sPaginationType": "full_numbers",
    "aoColumns": [
        { "sType": "eu_date" },
        null
    ]
});
});

您有日期的列，您应该像上面的代码一样使用 sType 定义。

score 1 · Accepted Answer

在 php 或 js 中只需传递一个数组并使用正交，例如：

$var[0][0] = "like as u wish, 30/12/2015 or something else";
$var[0][1] = strtotime($your_date_variable);

并且，在数据表中......

$('#data-table-contas_pagar').dataTable({
    "columnDefs": [
        {"targets":[0],"data": [0],"render": {"_": [0],"sort": [1]}}
    ]
});

score 0 · Accepted Answer

如果您必须处理已经格式化的日期，Zaheer Ahmed 的解决方案可以正常工作。

我对此解决方案有疑问，因为我必须管理美国格式的日期。

我通过这个微小的变化想通了：

function parseDate(a) {
    var ukDatea = a.split('/');
    return (ukDatea[2] + ukDatea[1] + ukDatea[0]) * 1;
}

jQuery.extend( jQuery.fn.dataTableExt.oSort, {
    "date-uk-pre": function ( a ) {
        return parseDate(a);
    },

    "date-uk-asc": function ( a, b ) {
        a = parseDate(a);
        b = parseDate(b);
        return ((a < b) ? -1 : ((a > b) ? 1 : 0));
    },

    "date-uk-desc": function ( a, b ) {
        a = parseDate(a);
        b = parseDate(b);
        return ((a < b) ? 1 : ((a > b) ? -1 : 0));
    }
});

其次是您的“aoColumns”定义。

score 0 · Accepted Answer

这个解决方案是完全错误的。您不能仅将日期的每个组成部分相加就将日期转换为数字。例如，如果您使用以下日期尝试此逻辑，您会发现它不会正确匹配：

2014 年 1 月 20 日 = 2035 年 2014 年 2 月 15 日 = 2031 年

女巫约会在先，升序？1月20日？不按照这个逻辑：P

执行 parsedate 方法的正确方法是将字符串转换为有效的日期时间，然后使用 getTime 函数正确排序表。

var day = a.split('/')[0]
var month = a.split('/')[1]
var year = a.split('/')[2]

var date = new Date(month + "/" + day + "/" + year)
return date.getTime()

score 0 · Accepted Answer

我想指出，当通过 Ajax使用来自服务器的数据时，解决方案非常简单，但可能不会立即显而易见。

返回排序顺序数组时，Datatables 将发送（在中$_POST）一个 2 元素数组，该数组相当于：

$_POST['order'][0] =array('column'=>'SortColumnName', 'dir'=>'asc'); 
// 2nd element is either 'asc' or 'desc'

因此，您可以以任何您想要的格式显示日期；只需让您的服务器仅根据sortColumnName.

例如，在 PHP（使用 MySQL）中，我使用以下内容：

 if (isset($_POST['order'])) {
          switch ($_POST['order'][0]['column']) {
               case 0:// sort by Primary Key
                    $order = 'pkItemid';
                    break;
               case 1:// Sort by reference number
                    $order = 'refNo';
                    break;
               case 2://Date Started
                    $order = 'dOpen';
                    break;
               default :
                    $order = 'pkItemid';
          }
          $orderdir = ($_POST['order'][0]['dir'] === 'desc') ? 'desc' : 'asc';
     }

请注意，由于没有将$_POST传递给$orderor $orderdir，因此不可能进行跨脚本攻击。

现在，只需附加到 MySQL 查询：

$sql ="SELECT pkItemid, refNo, DATE_FORMAT(dOpen,'%b %e, %Y') AS dateStarted
       FROM tblReference 
       ORDER BY $order $orderdir;";

运行查询，并仅将dateStarted值返回到 json 中的 Datatables。

score 0 · Accepted Answer

使用这个片段！

$(document).ready(function() {
 $.fn.dataTable.moment = function ( format, locale ) {
    var types = $.fn.dataTable.ext.type;

    // Add type detection
    types.detect.unshift( function ( d ) {
        return moment( d, format, locale, true ).isValid() ?
            'moment-'+format :
            null;
    } );

    // Add sorting method - use an integer for the sorting
    types.order[ 'moment-'+format+'-pre' ] = function ( d ) {
        return moment( d, format, locale, true ).unix();
    };
};

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

$('#example').DataTable();
});

当 js 适用于所有日期和时间格式时，请在初始化数据表之前添加此剪辑器，就像我之前所做的那样。

还记得加载http://momentjs.com/

score 0 · Accepted Answer

我也有同样的问题。

我在 2017 年 3 月 21 日在 td 中使用 span，通过这样做，数据表将其视为字符串并且排序不起作用。

我在 td 中删除了 span，它得到了修复。喜欢，2017 年 3 月 21 日

score 0 · Accepted Answer

我在其余通话中使用过

**日期变量是：创建**

var call = $.ajax({
            url: "../_api/Web/Lists/GetByTitle('NewUser')/items?$filter=(Created%20ge%20datetime'"+FromDate+"')%20and%20(Created%20le%20datetime'"+ToDate+"' and Title eq '"+epf+"' )&$top=5000",
            type: "GET",
            dataType: "json",
            headers: {
                Accept: "application/json;odata=verbose"
            }

            });

  call.done(function (data,textStatus, jqXHR){
        $('#example').dataTable({
            "bDestroy": true,
            "bProcessing": true,
            "aaData": data.d.results,
            "aLengthMenu" : [
             [50,100],
             [50,100]
            ],
             dom: 'Bfrtip',
            buttons: [
                'copy', 'csv', 'excel'
            ],

            "aoColumnDefs": [{ "bVisible": false  }],
            "aoColumns": [
                { "mData": "ID" },
                { "mData": "Title" },
                { "mData": "EmployeeName" },
                { "mData": "Department1" },
                { "mData": "ServicingAt" },
                { "mData": "TestField" }, 
                { "mData": "BranchCode" },   
                { "mData": "Created" ,"render": function (data, type, row) {
        data = moment(data).format('DD MMM YYYY');
        return data;
    }

score 0 · Accepted Answer

解决这个问题的最简单方法

像这样修改你的设计

//Add this data order attribute to td
<td data-order="@item.CreatedOn.ToUnixTimeStamp()">
                                    @item.CreatedOn
                                </td>
                                
                                
               
               Add create this Date Time helper function
// #region Region 
 public static long ToUnixTimeStamp(this DateTime dateTime) {
 TimeSpan timeSpan = (dateTime - new DateTime(1970, 1, 1, 0, 0, 0));
     return (long)timeSpan.TotalSeconds;
     } 
     #endregion

score 0 · Accepted Answer

似乎对我有用的是

将使用从我的数据库中的选择查询获取的完整日期时间对象推送到数据集中，该对象将按数据表格式“2018-01-05 08:45:56”绘制

然后

    $('#Table').DataTable({
        data: dataset,
        deferRender: 200,
        destroy: true,
        scrollY: false,
        scrollCollapse: true,
        scroller: true,
        "order": [[2, "desc"]],
        'columnDefs': [
            {
                'targets': 2,
                'createdCell':  function (td, cellData, rowData, row, col) {                        
                    var datestamp = new Date(cellData);
                    $(td).html(datestamp.getUTCDate() + '-' + (datestamp.getMonth()+1) + '-' + datestamp.getFullYear());
                }
            }
        ],
        "initComplete": function(settings, json) {
            $($.fn.dataTable.tables(true)).DataTable()
                .columns.adjust();               
        }
    });

行排序正确，然后我在行中得到我想要的 html

score 0 · Accepted Answer

我发现在这种情况下最简单的排序方法是在 JS 中添加“aaSorting”选项。

例如：

$(document).ready(function() {
    $('#contacts-table').dataTable({
        "aaSorting": [0, 'desc']
});

这里的问题是，此示例将排序来自第一列的条目，如 STRING，而不是日期。如果源代码允许您将日期格式从 dd/mm/yyyy 更改为 yyyy/mm/dd “aaSorting” 将正常为您工作。

score 0 · Accepted Answer

像这样使用标签data-order上的属性（ Ruby Example）：<td>

    <td data order='<%=rentroll.decorate.date%>'><%=rentroll.decorate.date%></td>

您的装饰器功能将是：

    def date
    object.date&.strftime("%d/%m/%Y")
    end

score 0 · Accepted Answer

如果您从数据库中获取日期并为每一行执行一个 for 循环并将其附加到一个字符串以在 javascript 中使用以自动填充数据表，则它需要看起来像这样。请注意，在使用隐藏跨度技巧时，您需要考虑日期的单个数字，例如如果它是第 6 小时，则需要在它之前添加一个零，否则跨度技巧在排序中不起作用.. 示例代码：

 DateTime getDate2 = Convert.ToDateTime(row["date"]);
 var hour = getDate2.Hour.ToString();
 if (hour.Length == 1)
 {
 hour = "0" + hour;
 }
 var minutes = getDate2.Minute.ToString();
 if (minutes.Length == 1)
 {
 minutes = "0" + minutes;
 }
 var year = getDate2.Year.ToString();
 var month = getDate2.Month.ToString();
 if (month.Length == 1)
 {
 month = "0" + month;
 }
 var day = getDate2.Day.ToString();
 if (day.Length == 1)
 {
 day = "0" + day;
 }
 var dateForSorting = year + month + day + hour + minutes; 
 dataFromDatabase.Append("<span style=\u0022display:none;\u0022>" + dateForSorting +
 </span>");

score 0 · Accepted Answer

试试这个：

"aoColumns": [
        null,
        null,
        null,
        null,
        {"sType": "date"},  //  "sType": "date" TO SPECIFY SORTING IS APPLICABLE ON DATE
        null
      ]

score 0 · Accepted Answer

对于要订购的列，请保留“sType”：“date-uk”，例如：-"data": "OrderDate", "sType": "date-uk" 在 ajax 中完成 Datatable 脚本后，保留以下代码

 jQuery.extend(jQuery.fn.dataTableExt.oSort, {
            "date-uk-pre": function (a) {
                var ukDatea = a.split('/');
                return (ukDatea[2] + ukDatea[1] + ukDatea[0]) * 1;
            },

            "date-uk-asc": function (a, b) {
                return ((a < b) ? -1 : ((a > b) ? 1 : 0));
            },

            "date-uk-desc": function (a, b) {
                return ((a < b) ? 1 : ((a > b) ? -1 : 0));
            }
        });

然后您将以这种格式获得日期为22-10-2018

score 0 · Accepted Answer

问题来源是日期时间格式。

错误样本：“MM-dd-yyyy H:mm”、“MM-dd-yyyy”

正确示例：“MM-dd-yyyy HH:mm”

score 0 · Accepted Answer

最简单的方法是在列的每个 TD 标签的日期之前添加一个隐藏的时间戳，例如：

<td class="sorting_1">
    <span class="d-none">1547022615</span>09/01/2019  09:30
</td>

使用默认字符串排序，时间戳将按照您想要的方式对列进行排序，并且在浏览器中呈现时不会显示。

score 0 · Accepted Answer

任何与 UTC 格式或其他人苦苦挣扎的人都可以阅读此内容

假设您有这种格式的日期

2019 年 10 月 15 日星期二 08:41:35 GMT+0000 (UTC)

首先我们可以使用 moment 将其转换为毫秒

例如，就我而言，我使用的是 HandleBar.js。所以我创建了一个 Helper 函数以使其更简单

hbs.registerHelper('dateformat', function (datetime) {
return moment(datetime).valueOf(); })

要不然

就这样转换

moment("Tue Oct 15 2019 08:41:35 GMT+0000 (UTC)").valueOf();

完成后，只需将这些值传递给您的表

现在这里的诀窍是同时传递它们并以毫秒为单位隐藏一个并以 UTC 格式显示一个

<td >
<span class="hideThisDate">{{DATA IN MILLISECONDS}}</span> 
{{YOUR DATE IN NORMAL FORMAT}}</td>

现在只需通过 CSS 以毫秒为单位隐藏

.hideThisDate {
 display:none;
 }

你应该很高兴去！

score 0 · Accepted Answer

I got the same issue while working with Doctrine. My datas was correctly sorted from the database with orderBy('p.updatedAt', 'DESC'), but when DataTable process them the final result was completly different.

The esiest way I found to resolve this is to add a hidden column timestamp in my table then order by this column when ordering by date. Full functional example here.

<table>
  <thead>
    <th>Some column<th>
    <th>Visible date<th>
    <th>Timestamp<th>
  </thead>

  <tbody>
    <td>Example with Twig</td>
    <td>{{ product.updatedAt ? time_diff(product.updatedAt) : '' }}</td>
    <td>{{ product.updatedAt ? product.updatedAt.getTimestamp() : '' }}</td>
  </tbody>
</table>

$(document).ready(function() {
  let dateColumn = 1;
  let timestampColumn = 2;
  let currentColumn = timestampColumn;
  let currentDirection = "desc";

  let table = $("#dataTable").DataTable({
    "order": [
        [ timestampColumn, "desc" ],
        // If you want to keep the default order from database
        // just set "order": [] so DataTable wont define other order
    ],
    "columnDefs": [
      {
        "targets": [ timestampColumn ],
        "visible": false, // Hide the timestamp column
      },
    ]
  });

  /**
   * @var e: Events
   * @var settings: DataTable settings
   * @var ordArr: Current order used by DataTable
   *      example: [{"src":8,"col":8,"dir":"asc","index":0,"type":"string"}]
   */
  table.on("order.dt", function (e, settings, ordArr) {
    currentColumn = ordArr[0].col;
    currentDirection = ordArr[0].dir;

    if(currentColumn === dateColumn) {
      table.order([timestampColumn, currentDirection]).draw();

      // Without this line you'll get an unexpected behaviour
      table.order([dateColumn, currentDirection]); 
    }
  })
});

jquery - 数据表日期排序dd/mm/yyyy问题

28 回答 28

2020 年更新：HTML 解决方案

jQuery 解决方案

日期排序 - 带有隐藏元素

Related

Reference