用于D-MMM-YY排序的Datatables和Moment.js

时间:2020-06-12 17:52:15

标签: datatables momentjs

我正在尝试对以D-MMM-YY格式输入的日期进行排序的数据表,但似乎并没有,仅按日期的第1个数字进行排序。

例如,它将20年6月1日之前的13年9月9日排序。

典型的表格行如下:

                                <tr>
                                    <td>25-Jul-11</td>
                                    <td>Announcement</td>
                                    <td><a href="#">#</a></td>
                                </tr>

我的JavaScript如下:

    <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格式是否被接受?

1 个答案:

答案 0 :(得分:1)

以下内容适用于您的日期格式。

最终结果,显示日期以升序排列:

enter image description here

<head>部分中添加了插件(除了标准的DataTables和jQuery项之外):

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

数据表配置,其中操作日期:

$(document).ready(function() {
    $('#example').DataTable( {
        columnDefs: [ {
            targets: 4, // column 5
            render: $.fn.dataTable.render.moment( 'D-MMM-YY', 'D-MMM-YY' )
        } ]
    } );
} );

</script>

它以与显示相同的格式读入日期-这就是重复图案的原因。有关更多选项,请参见here