用于D-MMM-YY排序的Datatables和Moment.js [英] Datatables and Moment.js for D-MMM-YY sorting

查看:70
本文介绍了用于D-MMM-YY排序的Datatables和Moment.js的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在尝试对以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屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆