Question

我有一个包含类别和日期的数据表。当我按日期排序时，它似乎只是以降序排序（见图片）。这是我的初始化：

jQuery('#tstable').dataTable({
        "columnDefs": [
            {"width": "20%", "orderData": [ 1, 0 ], "targets": 0},
            {"width": "11%", "targets": 1},
            {"width": "12%", "orderData": [ 1, 2], "targets": 2},
            {"width": "10%", "orderData": [ 1, 3], "targets": 3},
            {"width": "12%", "orderData": [ 1, 4], "targets": 4},
            {"width": "40%", "orderData": [ 1, 5], "targets": 5},
            {"sType": "date", "targets": 3},
            {"width": "0", "targets": 6, "visible": false}
        ],
        "aaSorting": [[6, "desc"]],
        "bPaginate": true,
        "bFilter": true,
        "aoColumns": [
            null,
            null,
            null,
            null,
            null,
            null,
            null
        ]
    });

以下排序结果：

有人能指出为什么日期不按升序排序吗？

Answer 1

jQuery.extend( jQuery.fn.dataTableExt.oSort, {
    "date-uk-pre": function ( a ) {
        var ukDatea = a.split('/');
        return (ukDatea[2] + ukDatea[1] + ukDatea[0]) * 1;
    },

    "date-uk-asc": function ( a, b ) {
        return ((a < b) ? -1 : ((a > b) ? 1 : 0));
    },

    "date-uk-desc": function ( a, b ) {
        return ((a < b) ? 1 : ((a > b) ? -1 : 0));
    }
    } );

    $(document).ready(function() {

        $('#example').DataTable( {
            "scrollX": true,
            columnDefs: [
                { type: 'date-uk', targets: 4 }
            ],
        });
    });

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css">
    <style type="text/css">

    div.dataTables_wrapper {
        width: 800px;
        margin: 0 auto;
    }

    </style>
</head>
<body>

<table id="example" class="display" cellspacing="0" 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>
        <tfoot>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </tfoot>
        <tbody>
            <tr>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>25/04/2011</td>
                <td>$320,800</td>
            </tr>
            <tr>
                <td>Garrett Winters</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>63</td>
                <td>25/07/2011</td>
                <td>$170,750</td>
            </tr>
            <tr>
                <td>Ashton Cox</td>
                <td>Junior Technical Author</td>
                <td>San Francisco</td>
                <td>66</td>
                <td>12/01/2009</td>
                <td>$86,000</td>
            </tr>
            <tr>
                <td>Cedric Kelly</td>
                <td>Senior Javascript Developer</td>
                <td>Edinburgh</td>
                <td>22</td>
                <td>29/03/2012</td>
                <td>$433,060</td>
            </tr>
            <tr>
                <td>Airi Satou</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>33</td>
                <td>28/11/2008</td>
                <td>$162,700</td>
            </tr>
            <tr>
                <td>Brielle Williamson</td>
                <td>Integration Specialist</td>
                <td>New York</td>
                <td>61</td>
                <td>02/12/2012</td>
                <td>$372,000</td>
            </tr>
            <tr>
                <td>Herrod Chandler</td>
                <td>Sales Assistant</td>
                <td>San Francisco</td>
                <td>59</td>
                <td>06/08/2012</td>
                <td>$137,500</td>
            </tr>
            <tr>
                <td>Rhona Davidson</td>
                <td>Integration Specialist</td>
                <td>Tokyo</td>
                <td>55</td>
                <td>14/10/2010</td>
                <td>$327,900</td>
            </tr>
            <tr>
                <td>Colleen Hurst</td>
                <td>Javascript Developer</td>
                <td>San Francisco</td>
                <td>39</td>
                <td>15/09/2009</td>
                <td>$205,500</td>
            </tr>
            <tr>
                <td>Sonya Frost</td>
                <td>Software Engineer</td>
                <td>Edinburgh</td>
                <td>23</td>
                <td>13/12/2008</td>
                <td>$103,600</td>
            </tr>
            <tr>
                <td>Jena Gaines</td>
                <td>Office Manager</td>
                <td>London</td>
                <td>30</td>
                <td>19/12/2008</td>
                <td>$90,560</td>
            </tr>
            <tr>
                <td>Quinn Flynn</td>
                <td>Support Lead</td>
                <td>Edinburgh</td>
                <td>22</td>
                <td>03/03/2013</td>
                <td>$342,000</td>
            </tr>
            <tr>
                <td>Charde Marshall</td>
                <td>Regional Director</td>
                <td>San Francisco</td>
                <td>36</td>
                <td>16/10/2008</td>
                <td>$470,600</td>
            </tr>
            <tr>
                <td>Haley Kennedy</td>
                <td>Senior Marketing Designer</td>
                <td>London</td>
                <td>43</td>
                <td>18/12/2012</td>
                <td>$313,500</td>
            </tr>
            <tr>
                <td>Tatyana Fitzpatrick</td>
                <td>Regional Director</td>
                <td>London</td>
                <td>19</td>
                <td>17/03/2010</td>
                <td>$385,750</td>
            </tr>
            <tr>
                <td>Michael Silva</td>
                <td>Marketing Designer</td>
                <td>London</td>
                <td>66</td>
                <td>27/11/2012</td>
                <td>$198,500</td>
            </tr>
            <tr>
                <td>Paul Byrd</td>
                <td>Chief Financial Officer (CFO)</td>
                <td>New York</td>
                <td>64</td>
                <td>09/06/2010</td>
                <td>$725,000</td>
            </tr>
            <tr>
                <td>Gloria Little</td>
                <td>Systems Administrator</td>
                <td>New York</td>
                <td>59</td>
                <td>10/04/2009</td>
                <td>$237,500</td>
            </tr>
            
        </tbody>
    </table>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.3.js"> </script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>

Answer 2

DataTables有许多插件可用于各种排序要求。您可以看到它们的列表here.

具体来说，我使用的是US-DateTime插件here

粘贴插件代码：

/**
 * DataTables plug-in to handle U.S.-style dates. Requires month day year.  
 * Time is optional and can be in 12 or 24 hour formats. 
 * Properly parses mm/m, dd/d and yyyy/yy.
 * 
 * Based on original datetime-us plugin by Kevin Gravier.
 *
 *  @name Flexible US Datetime
 *  @summary Sort dates and times in US mm/dd/yyyy with optional time.
 *  @author Mark Stewart
 *
 *  @example
 *    $('#example').dataTable( {
 *       columnDefs: [
 *         { type: 'datetime-us-flex', targets: 0 }
 *       ]
 *    } );
 */

jQuery.extend( jQuery.fn.dataTableExt.oSort, {
"datetime-us-flex-pre": function ( a ) {
// If there's no slash, then it's not an actual date, so return zero for sorting
if(a.indexOf('/') === -1) {
    return '0';
} else {
  // Set optional items to zero
  var hour = 0,
      min = 0,
      ap = 0;
  // Execute match. Requires month, day, year. Can be mm/dd or m/d. Can be yy or yyyy
  // Time is optional. am/pm is optional
  // TODO - remove extra time column from array
  var b = a.match(/(\d{1,2})\/(\d{1,2})\/(\d{2,4})( (\d{1,2}):(\d{1,2}))? ?(am|pm|AM|PM|Am|Pm)?/),
      month = b[1],
      day = b[2],
      year = b[3];
  // If time exists then output hours and minutes
  if (b[4] != undefined) {
    hour = b[5];
    min = b[6];
  }
  // if using am/pm then change the hour to 24 hour format for sorting
  if (b[7] != undefined) {
    ap = b[7];
    if(hour == '12') hour = '0';
    if(ap == 'pm') hour = parseInt(hour, 10)+12;
  }

  // for 2 digit years, changes to 20__ if less than 70
  if(year.length == 2){
    if(parseInt(year, 10) < 70) year = '20'+year;
    else year = '19'+year;
  }
  // Converts single digits
  if(month.length == 1) month = '0'+month;
  if(day.length == 1) day = '0'+day;
  if(hour.length == 1) hour = '0'+hour;
  if(min.length == 1) min = '0'+min;
  var tt = year+month+day+hour+min;

  return tt;
}      
},
 "datetime-us-flex-asc": function ( a, b ) {
   return a - b;
},
 "datetime-us-flex-desc": function ( a, b ) {
   return b - a;
}
});

DataTable排序问题

2 个答案: