Datatables and Moment.js for D-MMM-YY sorting

问题

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.

For example, it sorts 9-Sep-13 before 1-Jun-20.

A typical table line is as follows:

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

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

Is this D-MMM-YY format even accepted?

回答1:

The following works, with your date format.

End result, showing dates sorted in ascending order:

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>

The test data:

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

来源：https://stackoverflow.com/questions/62349791/datatables-and-moment-js-for-d-mmm-yy-sorting

标签

datatables

momentjs