按英国日期排序jQuery datatable并忽略空单元格

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/yyyy格式排序"age"列的问题，它只将我的列转换成了整数格式，这显然不对，因为它应该是日期格式。

- Xawi Leones

Answer 1

请看下面的更新后的代码片段或以下的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>

- Salman A

---

嗨，谢谢@salman。但是我如何使用类名来定位要排序的标题并使其工作呢？谢谢 ^_^ - Xawi Leones

你读了手册！最近datatables改变了很多东西，所以我不确定。 - Salman A

+将表达式转换为数字，例如如果x [2]是字符串"2014"，则+ x [2]返回_数字_ 2014（您也可以使用parseInt）。 - Salman A

同样地，+new Date(...)将日期对象转换为数字，这个数字是自1970年1月1日以来的毫秒数（可以使用new Date(...).getTime()）。 - Salman A

嗨，我已经按原样实现了您的代码。但问题在于，“customdatesort-pre” 'a' 参数值中仅得到空值，而不是具有值的字段。我想我得到了结果。我不知道现在该怎么办。请帮帮我。 - Vikash