如何使用DataTables jquery插件按datesorting?

我正在使用数据表jQuery的插件,并希望按datesorting。

我知道他们有一个插件,但我找不到从哪里下载

http://datatables.net/plug-ins/sorting

我相信我需要这个文件:dataTables.numericComma.js但我无法find它在任何地方,当我下载数据表,它似乎并没有在压缩文件。

我也不确定是否需要将我自己的自定义date分类器传递给此插件。

我正在尝试对这种格式进行sortingMM / DD / YYYY HH:MM TT(AM | PM)

谢谢

编辑

我怎样才能改变这个以MM / DD / YYYY HH:MM TT(AM | PM)sorting并将其更改为美国的date?

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)); }; 

点击date(dd / mm / YYY)下的“显示详情”链接,然后您可以复制并粘贴该处提供的插件代码


更新:我认为你可以切换数组的顺序,如下所示:

 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)); }; 

我所做的只是切换__date_[1] (日)和__date_[0] (月),并用usreplaceuk ,所以你不会感到困惑。 我觉得应该照顾好你的。


更新#2:您应该能够使用date对象进行比较。 尝试这个:

 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)); }; 

datesorting – 带有隐藏的元素

将date转换为YYYYMMDD格式,前置为<td>的实际值( MM / DD / YYYY ),将其包装在一个元素中,将样式设置为display:none; 到元素。 现在datesorting将作为一个正常的sorting。 date时间sorting也是一样的。

HTML

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

CSS

 #data-table span { display:none; } 

您应该使用HTML5数据属性。 https://www.datatables.net/examples/advanced_init/html5-data-attributes.html

只需将data-order元素添加到您的td元素即可
没有插件需要。

 <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> 

我意识到这是一个两岁的问题,但我仍然觉得它有用。 我最终使用了由Fudgey提供的示例代码,但使用了较小的Mod。 为我节省了一些时间,谢谢!

 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)); }; 

截至2015年,根据我在DataTable中对Date列进行sorting的最方便的方法是使用所需的sorting插件 。 由于我的date格式是dd/mm/yyyy hh:mm:ss ,所以我最终使用了date-euro插件 。 所有人需要做的是:

第1步:包括sorting插件的JavaScript文件或代码和;

第2步:添加如下所示的columnDefs以定位适当的列。

 $('#example').dataTable( { columnDefs: [ { type: 'date-euro', targets: 0 } ] }); 

为了防止有人在date值或单元格中有空格的地方出现问题,您将必须处理这些位。 有时候,一个空的空间不能被来自html的trim函数处理,就像“$ nbsp;”一样。 如果你不处理这些问题,你的分类工作将无法正常进行,并且会破坏空白处。

我也从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!="&nbsp;") { 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!="&nbsp;") { 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!="&nbsp;") { 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!="&nbsp;") { 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; }; 

关于更新#1,有两个问题:

  • 天数= 1(d / MM / YYYY)而不是(dd / MM / YYYY)
  • 空的date

这里是避免这些问题的解决scheme:

 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)); }; 

工作了一整天后,我得到了解决办法。 这是一个小哈克解决scheme添加跨度内的TD标签

 <td><span><%= item.StartICDate %></span></td>. 

我使用的date格式是dd / MM / YYYY。 在Datatables1.9.0中testing