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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/12003222/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-26 11:11:24  来源:igfitidea点击:

Datatable date sorting dd/mm/yyyy issue

jquerydatatablesdate-sorting

提问by jaget

I am using a Jquery plugin called datatables

我正在使用一个名为datatables的 Jquery 插件

Its fantastic, however I cannot get the dates to sort correctly according to the dd/mm/yyyy format.

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

I have looked at their support formats but none of these fixes seem to work.

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

Can anybody here help me please?

这里有人可以帮我吗?

回答by Zaheer Ahmed

Update 2020: HTML Solution

2020 年更新:HTML 解决方案

Since HTML 5 is so much developed and almost all major browser supporting it. So now a much cleaner approach is to use HTML5 data attributes(maxx777 provided a PHP solution I am using the simple HTML). For non-numeric data as in our scenario, we can use data-sortor data-orderattribute and assign a sortable value to it.

由于 HTML 5 得到了如此多的发展,并且几乎所有主要浏览器都支持它。所以现在更简洁的方法是使用HTML5 数据属性(maxx777 提供了一个 PHP 解决方案,我使用的是简单的 HTML)。对于我们场景中的非数字数据,我们可以使用data-sortordata-order属性并为其分配一个可排序的值。

HTML

HTML

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

Here is working HTML solution

这是有效的 HTML 解决方案

jQuery Solution

jQuery 解决方案

Here is working jQuery solution.

这是有效的 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));
}
} );

Add the above code to script and set the specific column with Date values with { "sType": "date-uk" }and others as null, see below:

将上面的代码添加到脚本中,并将具有日期值{ "sType": "date-uk" }和其他值的特定列设置为空,如下所示:

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

回答by Anulal S

Date Sort - with a hidden element

日期排序 - 带有隐藏元素

Convert the date to the format YYYYMMDDand prepend to the actual value (DD/MM/YYYY) in the <td>, wrap it in an element, set style display:none;to the elements. Now the date sort will work as a normal sort. The same can be applied to date-time sort.

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

HTML

HTML

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

CSS

CSS

#data-table span {
    display:none; 
}

回答by maxx777

I know this is an old question and answers are old too. Recently I came across a simple and clean way of sorting dates. It can be done by HTML5 data-orderattribute to <td>element.

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

Here's what I have done in my PHP:

这是我在 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>

回答by mineroot

Try thisplugin.

试试这个插件。

As stated hereyou need to include Moment.jsand the datatable-moment plugin, then just declare the date format you are using. The plugin will autodetect your date columns and sort it like it should be. For moment.js format explanations, check here.

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

Example:

例子:

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

回答by CherryBlossom

If you don't want to use momentum.js or any other date formating, you can prepend a date format in milliseconds in the date value so that the sort will read according to it's millisecond. And hide the milliseconds date format.

如果您不想使用momentum.js 或任何其他日期格式,您可以在日期值中添加一个以毫秒为单位的日期格式,以便排序将根据它的毫秒读取。并隐藏毫秒日期格式。

Sample code:

示例代码:

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

HTML

HTML

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

That's it.

就是这样。

回答by Reyan Chougle

This way it worked for me.

这样它对我有用。

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

This date format in data-orderattribute should be in this format which is being supported by DataTable.

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

回答by augustine jenin

You can resolve this issue with php.

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

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

回答by Patrikoko

Another solution: https://datatables.net/blog/2014-12-18

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

with 2 JavaScript libraries:

使用 2 个 JavaScript 库:

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

then only this :

那么只有这个:

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

回答by Nikhil Gyan

Try this:

尝试这个:

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

回答by labplace

in php or js just pass an array and use orthogonal, like:

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

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

and, in datatable...

并且,在数据表中...

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