如何使用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]
(月),并用us
replaceuk
,所以你不会感到困惑。 我觉得应该照顾好你的。
更新#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!=" ") { 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; };
关于更新#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