如何使用 DataTables jquery 插件按日期排序？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2862322/
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
How to sort by Date with DataTables jquery plugin?
提问by chobo2
I am using the datatables jquery plugin and want to sorty by dates.
我正在使用数据表 jquery 插件并希望按日期排序。
I know they got a plugin but I can't find where to actually download it from
我知道他们有一个插件，但我找不到从哪里下载它
http://datatables.net/plug-ins/sorting
http://datatables.net/plug-ins/sorting
I believe I need this file: dataTables.numericComma.js yet I can't find it anywhere and when I download datatables it does not seem to be in the zip file.
我相信我需要这个文件：dataTables.numericComma.js 但我在任何地方都找不到它，当我下载数据表时，它似乎不在 zip 文件中。
I am also not sure if I need to make my own custom date sorter to pass into this plugin.
我也不确定是否需要制作我自己的自定义日期排序器来传递给这个插件。
I am trying to sort this format MM/DD/YYYY HH:MM TT(AM |PM)
我正在尝试对这种格式进行排序 MM/DD/YYYY HH:MM TT(AM |PM)
Thanks
谢谢
Edit
编辑
How can I change this to sort by MM/DD/YYYY HH:MM TT(AM |PM) and change it to U.S date?
如何将其更改为按 MM/DD/YYYY HH:MM TT(AM |PM) 排序并将其更改为美国日期？
jQuery.fn.dataTableExt.oSort['uk_date-asc'] = function(a,b) {
var ukDatea = a.split('/');
var ukDateb = b.split('/');
var x = (ukDatea[2] + ukDatea[1] + ukDatea[0]) * 1;
var y = (ukDateb[2] + ukDateb[1] + ukDateb[0]) * 1;
return ((x < y) ? -1 : ((x > y) ? 1 : 0));
};
jQuery.fn.dataTableExt.oSort['uk_date-desc'] = function(a,b) {
var ukDatea = a.split('/');
var ukDateb = b.split('/');
var x = (ukDatea[2] + ukDatea[1] + ukDatea[0]) * 1;
var y = (ukDateb[2] + ukDateb[1] + ukDateb[0]) * 1;
return ((x < y) ? 1 : ((x > y) ? -1 : 0));
};
采纳答案by Mottie
Click on the "show details" link under Date (dd/mm/YYY), then you can copy and paste that plugin code provided there
单击Date (dd/mm/YYY)下的“显示详细信息”链接，然后您可以复制并粘贴那里提供的插件代码
Update: I think you can just switch the order of the array, like so:
更新：我认为您可以切换数组的顺序，如下所示：
jQuery.fn.dataTableExt.oSort['us_date-asc'] = function(a,b) {
var usDatea = a.split('/');
var usDateb = b.split('/');
var x = (usDatea[2] + usDatea[0] + usDatea[1]) * 1;
var y = (usDateb[2] + usDateb[0] + usDateb[1]) * 1;
return ((x < y) ? -1 : ((x > y) ? 1 : 0));
};
jQuery.fn.dataTableExt.oSort['us_date-desc'] = function(a,b) {
var usDatea = a.split('/');
var usDateb = b.split('/');
var x = (usDatea[2] + usDatea[0] + usDatea[1]) * 1;
var y = (usDateb[2] + usDateb[0] + usDateb[1]) * 1;
return ((x < y) ? 1 : ((x > y) ? -1 : 0));
};
All I did was switch the __date_[1](day) and __date_[0](month), and replaced ukwith usso you won't get confused. I think that should take care of it for you.
我所做的只是切换__date_[1]（日）和__date_[0]（月），并替换为uk，us这样您就不会感到困惑。我认为那应该为你照顾它。
Update #2: You should be able to just use the date object for comparison. Try this:
更新 #2：您应该能够仅使用日期对象进行比较。尝试这个：
jQuery.fn.dataTableExt.oSort['us_date-asc'] = function(a,b) {
var x = new Date(a),
y = new Date(b);
return ((x < y) ? -1 : ((x > y) ? 1 : 0));
};
jQuery.fn.dataTableExt.oSort['us_date-desc'] = function(a,b) {
var x = new Date(a),
y = new Date(b);
return ((x < y) ? 1 : ((x > y) ? -1 : 0));
};
回答by Anulal S
Date Sort - with a hidden element
日期排序 - 带有隐藏元素
Convert the date to the format YYYYMMDDand prepend to the actual value (MM/DD/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格式并附加到 中的实际值 ( MM/DD/YYYY) <td>，将其包装在一个元素中，将样式设置display:none;为元素。现在日期排序将作为正常排序工作。这同样适用于日期时间排序。
HTML
HTML
<table id="data-table">
<tr>
<td><span>YYYYMMDD</span>MM/DD/YYYY</td>
</tr>
</table>
CSS
CSS
#data-table span {
display:none;
}
回答by RenRen
You should make use of the HTML5 Data Attributes.https://www.datatables.net/examples/advanced_init/html5-data-attributes.html
您应该使用 HTML5 数据属性。https://www.datatables.net/examples/advanced_init/html5-data-attributes.html
Just add the data-orderelement to your td element.
No plugins required.
只需将data-order元素添加到您的td element。
不需要插件。
<table class="table" id="exampleTable">
<thead>
<tr>
<th>Firstname</th>
<th>Sign Up Date</th>
</tr>
</thead>
<tbody>
<tr>
<td>Peter</td>
<td data-order="2015-11-13 12:00">13. November 2015</td>
</tr>
<tr>
<td>Daniel</td>
<td data-order="2015-08-06 13:44">06. August 2015</td>
</tr>
<tr>
<td>Michael</td>
<td data-order="2015-10-14 16:12">14. October 2015</td>
</tr>
</tbody>
</table>
<script>
$(document).ready(function() {
$('#exampleTable').DataTable();
});
</script>
回答by Kevin
I realize this is a two year old question, but I still found it useful. I ended up using the sample code provided by Fudgey but with a minor mod. Saved me some time, thanks!
我意识到这是一个两年前的问题，但我仍然觉得它很有用。我最终使用了 Fudgey 提供的示例代码，但使用了一个小模块。节省了我一些时间，谢谢！
jQuery.fn.dataTableExt.oSort['us_date-asc'] = function(a,b) {
var x = new Date($(a).text()),
y = new Date($(b).text());
return ((x < y) ? -1 : ((x > y) ? 1 : 0));
};
jQuery.fn.dataTableExt.oSort['us_date-desc'] = function(a,b) {
var x = new Date($(a).text()),
y = new Date($(b).text());
return ((x < y) ? 1 : ((x > y) ? -1 : 0));
};
回答by Dani
Datatables only can order by DateTime in "ISO-8601"format, so you have to convert your date in "date-order" to this format (example using Razor):
数据表只能按“ISO-8601”格式的日期时间排序，因此您必须将“日期顺序”中的日期转换为这种格式（例如使用 Razor）：
<td data-sort="@myDate.ToString("o")">@myDate.ToShortDateString() - @myDate.ToShortTimeString()</td>
回答by Vikram Deshmukh
As of 2015, the most convenient way according to me to sort Date column in a DataTable, is using the required sort plugin. Since the date format in my case was dd/mm/yyyy hh:mm:ss, I ended up using the date-euro plugin.
All one needs to do is:
截至 2015 年，根据我对 DataTable 中的 Date 列进行排序的最方便的方法是使用所需的排序插件。由于我的日期格式是dd/mm/yyyy hh:mm:ss，我最终使用了date-euro plugin。一个人需要做的就是：
Step 1:Include the sorting plugin JavaScript fileor code and;
步骤1：包含排序插件JavaScript文件或代码；
Step 2:Add columnDefsas shown below to target appropriate column(s).
第 2 步：columnDefs按如下所示添加以定位适当的列。
$('#example').dataTable( {
columnDefs: [
{ type: 'date-euro', targets: 0 }
]
});
回答by Hali
Just in case someone is having trouble where they have blank spaces either in the date values or in cells, you will have to handle those bits. Sometimes an empty space is not handled by trim function coming from html it's like "$nbsp;". If you don't handle these, your sorting will not work properly and will break where ever there is a blank space.
万一有人在日期值或单元格中有空格时遇到问题，您将不得不处理这些位。有时，来自 html 的修剪函数不会处理空白区域，就像“$nbsp;”一样。如果你不处理这些，你的排序将无法正常工作，并且会在有空格的地方中断。
I got this bit of code from jquery extensions here too and changed it a little bit to suit my requirement. You should do the same:) cheers!
我也从这里的 jquery 扩展中获得了这段代码，并对其进行了一些更改以满足我的要求。你也应该这样做：）干杯！
function trim(str) {
str = str.replace(/^\s+/, '');
for (var i = str.length - 1; i >= 0; i--) {
if (/\S/.test(str.charAt(i))) {
str = str.substring(0, i + 1);
break;
}
}
return str;
}
jQuery.fn.dataTableExt.oSort['uk-date-time-asc'] = function(a, b) {
if (trim(a) != '' && a!=" ") {
if (a.indexOf(' ') == -1) {
var frDatea = trim(a).split(' ');
var frDatea2 = frDatea[0].split('/');
var x = (frDatea2[2] + frDatea2[1] + frDatea2[0]) * 1;
}
else {
var frDatea = trim(a).split(' ');
var frTimea = frDatea[1].split(':');
var frDatea2 = frDatea[0].split('/');
var x = (frDatea2[2] + frDatea2[1] + frDatea2[0] + frTimea[0] + frTimea[1] + frTimea[2]) * 1;
}
} else {
var x = 10000000; // = l'an 1000 ...
}
if (trim(b) != '' && b!=" ") {
if (b.indexOf(' ') == -1) {
var frDateb = trim(b).split(' ');
frDateb = frDateb[0].split('/');
var y = (frDateb[2] + frDateb[1] + frDateb[0]) * 1;
}
else {
var frDateb = trim(b).split(' ');
var frTimeb = frDateb[1].split(':');
frDateb = frDateb[0].split('/');
var y = (frDateb[2] + frDateb[1] + frDateb[0] + frTimeb[0] + frTimeb[1] + frTimeb[2]) * 1;
}
} else {
var y = 10000000;
}
var z = ((x < y) ? -1 : ((x > y) ? 1 : 0));
return z;
};
jQuery.fn.dataTableExt.oSort['uk-date-time-desc'] = function(a, b) {
if (trim(a) != '' && a!=" ") {
if (a.indexOf(' ') == -1) {
var frDatea = trim(a).split(' ');
var frDatea2 = frDatea[0].split('/');
var x = (frDatea2[2] + frDatea2[1] + frDatea2[0]) * 1;
}
else {
var frDatea = trim(a).split(' ');
var frTimea = frDatea[1].split(':');
var frDatea2 = frDatea[0].split('/');
var x = (frDatea2[2] + frDatea2[1] + frDatea2[0] + frTimea[0] + frTimea[1] + frTimea[2]) * 1;
}
} else {
var x = 10000000;
}
if (trim(b) != '' && b!=" ") {
if (b.indexOf(' ') == -1) {
var frDateb = trim(b).split(' ');
frDateb = frDateb[0].split('/');
var y = (frDateb[2] + frDateb[1] + frDateb[0]) * 1;
}
else {
var frDateb = trim(b).split(' ');
var frTimeb = frDateb[1].split(':');
frDateb = frDateb[0].split('/');
var y = (frDateb[2] + frDateb[1] + frDateb[0] + frTimeb[0] + frTimeb[1] + frTimeb[2]) * 1;
}
} else {
var y = 10000000;
}
var z = ((x < y) ? 1 : ((x > y) ? -1 : 0));
return z;
};
回答by Giu
About update#1, there are 2 problems :
关于更新#1，有两个问题：
- Number of days = 1 (d/MM/YYYY) instead of (dd/MM/YYYY)
- Empty date
- 天数 = 1 (d/MM/YYYY) 而不是 (dd/MM/YYYY)
- 空日期
here is the solution to avoid these problems :
这是避免这些问题的解决方案：
jQuery.fn.dataTableExt.oSort['uk_date-asc'] = function (a, b) {
var ukDatea = a.split('/');
var ukDateb = b.split('/');
//Date empty
if (ukDatea[0] == "" || ukDateb[0] == "") return 1;
//need to change Date (d/MM/YYYY) into Date (dd/MM/YYYY)
if(ukDatea[0]<10) ukDatea[0] = "0" + ukDatea[0];
if(ukDateb[0]<10) ukDateb[0] = "0" + ukDateb[0];
var x = (ukDatea[2] + ukDatea[1] + ukDatea[0]) * 1;
var y = (ukDateb[2] + ukDateb[1] + ukDateb[0]) * 1;
return ((x < y) ? -1 : ((x > y) ? 1 : 0));
};
//Sorting by Date
jQuery.fn.dataTableExt.oSort['uk_date-desc'] = function (a, b) {
var ukDatea = a.split('/');
var ukDateb = b.split('/');
//Date empty
if (ukDatea[0] == "" || ukDateb[0] == "") return 1;
//MANDATORY to change Date (d/MM/YYYY) into Date (dd/MM/YYYY)
if(ukDatea[0]<10) ukDatea[0] = "0" + ukDatea[0];
if(ukDateb[0]<10) ukDateb[0] = "0" + ukDateb[0];
var x = (ukDatea[2] + ukDatea[1] + ukDatea[0]) * 1;
var y = (ukDateb[2] + ukDateb[1] + ukDateb[0]) * 1;
return ((x < y) ? 1 : ((x > y) ? -1 : 0));
};
回答by Tigran
Follow the link https://datatables.net/blog/2014-12-18
按照链接 https://datatables.net/blog/2014-12-18
A very easy way to integrate ordering by date.
按日期集成订购的一种非常简单的方法。
<script type="text/javascript" charset="utf8" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/plug-ins/1.10.19/sorting/datetime-moment.js"></script>
Put this code in before initializing the datatable:
在初始化数据表之前放入此代码：
$(document).ready(function () {
// ......
$.fn.dataTable.moment('DD-MMM-YY HH:mm:ss');
$.fn.dataTable.moment('DD.MM.YYYY HH:mm:ss');
// And any format you need
}
回答by combatc2
Specify the column's typeas type: 'date':
将列指定type为type: 'date'：
{title: 'Expiration Date', data: 'ExpirationDate', type: 'date'}
{title: 'Expiration Date', data: 'ExpirationDate', type: 'date'}
