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

Posted 2023-05-07

【中文标题】按英国日期对 jQuery 数据表进行排序并忽略空单元格

【英文标题】：Sort a jQuery datatable by UK date and ignore empty cells

【发布时间】：2015-01-24 10:51:16

【问题描述】：

以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 格式对“年龄”列进行排序的问题。 它只是将我的列设为整数格式，这不应该是因为它是日期格式。

【参考方案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>

【讨论】：

嗨，谢谢@salman .. 但是如何使用类名来定位我想要排序的标题？谢谢^_^

您已阅读手册！最近数据表似乎发生了很多变化，所以我不确定。

嘿嘿嘿。谢谢你骂我，我现在可以工作了，感谢Godbless :DDD jsfiddle.net/xawixawxaw/dup75/19

嗨@salman，你能解释一下r = +new Date(+x[2], +x[1] - 1, +x[0]);中的“+”是什么意思吗？谢谢你的帮助！

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