javascript - 按英国日期对 jQuery 数据表进行排序并忽略空单元格

Question

按dd/mm/yyyy 格式排序日期时，如何让空单元格粘在底部？我的问题在这里(对年龄列进行排序):http://jsfiddle.net/dup75/11/

$('#hr_curriculum_interns').dataTable( {
    "aoColumns": [
        { "sType": "date-uk" },
        null,
        null,
        null,
        null,
        null,
        null,
        null,
        null
    ]
}); 

这里著名的代码见http://datatables.net/forums/discussion/4025/sorting-to-ignore-empty-cells哪个代码是:

    $.fn.dataTableExt.oSort['mystring-asc'] = function(x,y) {
    var retVal;
    x = x.replace(' ', '');
    y = y.replace(' ', '');

    if (x == y) retVal = 0;
    else if (x.substr(0,1) == "{" && y.substr(0,1) == "{") {
        if (x > y) retVal=  1;
        else retVal =  -1;
    }
    else if (x.substr(0,1) == "{") retVal =  1;
    else if (y.substr(0,1) == "{") retVal =  -1;

    else if (x > y) retVal=  1;
    else return -1;

    return retVal;
}
$.fn.dataTableExt.oSort['mystring-desc'] = function(y,x) {
    var retVal;
    x = x.replace(' ', '');
    y = y.replace(' ', '');

    if (x == y) retVal= 0;
    else if (x.substr(0,1) == "{" && y.substr(0,1) == "{") {
        if (x > y) retVal=  -1;
        else retVal =  1;
    }  
    else if (x.substr(0,1) == "{") retVal =  -1;
    else if (y.substr(0,1) == "{") retVal =  1;

    else if (x > y) retVal =  1;
    else return -1;

    return retVal;
 }

但它并没有解决我在以 dd/mm/yyy 格式对“年龄”列进行排序时遇到的问题。它只是使我的专栏采用整数格式，这不应该是因为它采用日期格式。

Answer 1

参见 updated fiddle here或下面的 StackSnippet。基本上你需要实现一个自定义排序功能。这是该排序函数的代码以及解释:

// add a set of custom sorting functions
jQuery.extend(jQuery.fn.dataTableExt.oSort, {
  "customdatesort-pre": function(a) {
    // returns the "weight" of a cell value
    var r, x;
    if (a === null || a === "") {
      // for empty cells: weight is a "special" value which needs special handling
      r = false;
    } else {
      // otherwise: weight is the "time value" of the date
      x = a.split("/");
      r = +new Date(+x[2], +x[1] - 1, +x[0]);
    }
    console.log("[PRECALC] " + a + " becomes " + r);
    return r;
  },
  "customdatesort-asc": function(a, b) {
    // return values are explained in Array.prototype.sort documentation
    if (a === false && b === false) {
      // if both are empty cells then order does not matter
      return 0;
    } else if (a === false) {
      // if a is an empty cell then consider a greater than b
      return 1;
    } else if (b === false) {
      // if b is an empty cell then consider a less than b
      return -1;
    } else {
      // common sense
      return a - b;
    }
  },
  "customdatesort-desc": function(a, b) {
    if (a === false && b === false) {
      return 0;
    } else if (a === false) {
      return 1;
    } else if (b === false) {
      return -1;
    } else {
      return b - a;
    }
  }
});
$(document).ready(function() {
  $('#hr_curriculum_interns').dataTable({
    "aoColumns": [{
        "sType": "customdatesort"
      },
      null,
      null,
      null,
      null,
      null,
      null,
      null,
      null
    ]
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/css/jquery.dataTables.css">


<div class="container">
  <table id="hr_curriculum_interns" class="table table-striped">
    <thead>
      <tr>
        <th>Age</th>
        <th>Position</th>
        <th>-</th>
        <th>-</th>
        <th>-</th>
        <th>-</th>
        <th>-</th>
        <th>-</th>
        <th>-</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>31/12/2015</td>
        <td>Athos</td>
        <td>Athos</td>
        <td>Athos</td>
        <td>Athos</td>
        <td>Athos</td>
        <td>Athos</td>
        <td>Athos</td>
        <td>Athos</td>
      </tr>
      <tr>
        <td>31/12/2014</td>
        <td>Athos</td>
        <td>Athos</td>
        <td>Athos</td>
        <td>Athos</td>
        <td>Athos</td>
        <td>Athos</td>
        <td>Athos</td>
        <td>Athos</td>
      </tr>
      <tr>
        <td></td>
        <td>Athos</td>
        <td>Athos</td>
        <td>Athos</td>
        <td>Athos</td>
        <td>Athos</td>
        <td>Athos</td>
        <td>Athos</td>
        <td>Athos</td>
      </tr>
      <tr>
        <td>14/11/2014</td>
        <td>Athos</td>
        <td>Athos</td>
        <td>Athos</td>
        <td>Athos</td>
        <td>Athos</td>
        <td>Athos</td>
        <td>Athos</td>
        <td>Athos</td>
      </tr>
      <tr>
        <td>31/12/2013</td>
        <td>Athos</td>
        <td>Athos</td>
        <td>Athos</td>
        <td>Athos</td>
        <td>Athos</td>
        <td>Athos</td>
        <td>Athos</td>
        <td>Athos</td>
      </tr>
    </tbody>
  </table>
</div>