用于D-MMM-YY排序的Datatables和Moment.js [英] Datatables and Moment.js for D-MMM-YY sorting
问题描述
我正在尝试对以D-MMM-YY格式输入的日期进行排序的数据表,但似乎没有,仅按日期的第一位进行排序.
I'm trying to get my datatables with dates entered in the D-MMM-YY format to be sorted but it doesn't appear to do so, only by the 1st digit in the date.
例如,它在20年6月1日之前对13年9月9日进行排序.
For example, it sorts 9-Sep-13 before 1-Jun-20.
典型的表格行如下:
<tr>
<td>25-Jul-11</td>
<td>Announcement</td>
<td><a href="#">#</a></td>
</tr>
我的JavaScript如下:
My javascript is as follows:
<script type="text/javascript">
$(document).ready(function() {
$.fn.dataTable.moment( 'D-MMM-YY');
$('#pn2020').DataTable({
"pageLength": 20,
order: [[ 0, "desc" ]],
} );
} );
</script> <!-- InstanceEndEditable -->
这种D-MMM-YY格式是否被接受?
Is this D-MMM-YY format even accepted?
推荐答案
下面的方法适用于您的日期格式.
The following works, with your date format.
最终结果,显示日期以升序排列:
End result, showing dates sorted in ascending order:
添加到<head>
部分的插件(除了标准的DataTables和jQuery项之外):
Plug-ins added to the <head>
section (in addition to the standard DataTables and jQuery items):
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.26.0/moment.min.js"></script>
<script src="https://cdn.datatables.net/plug-ins/1.10.21/dataRender/datetime.js"></script>
测试数据:
<table id="example" class="display dataTable cell-border" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>26-Jul-10</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>25-Mar-11</td>
<td>$170,750</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2-Jul-11</td>
<td>$86,000</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>5-Jul-11</td>
<td>$433,060</td>
</tr>
<tr>
<td>Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>25-Jul-11</td>
<td>$162,700</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
数据表配置,其中操作日期:
The datatable configuration, where the date is manipulated:
$(document).ready(function() {
$('#example').DataTable( {
columnDefs: [ {
targets: 4, // column 5
render: $.fn.dataTable.render.moment( 'D-MMM-YY', 'D-MMM-YY' )
} ]
} );
} );
</script>
它以与显示相同的格式读入日期-这就是重复图案的原因.有关更多选项,请参见此处.
This reads in the date in the same format in which it is displayed - which is why the pattern is repeated. For more options, see here.
这篇关于用于D-MMM-YY排序的Datatables和Moment.js的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!