jQuery DataTables - 当日期也是链接时排序不起作用

Question

我注意到当日期也是链接时，英国日期排序不起作用。

实施例1（demo）

这里的时间是纯测试。工程完好。

 <tr> 
      <td>01/01/01</td> 
      <td>Tarik</td> 
      <td>Rashad Kidd</td> 
      <td>1 34 238 6239-0509</td> 
     </tr> 

实施例2（demo）

这里的时间也是一个链接。根本不起作用。尽管没有抛出任何错误。

  <tr> 
      <td><a href="#">01/01/01</a></td> 
      <td>Tarik</td> 
      <td>Rashad Kidd</td> 
      <td>1 34 238 6239-0509</td> 
     </tr> 

我也注意到，排序不上，即使它们是链接的任何其他元素的工作。只有日期作为链接才是问题。

我用下面的JS代码：

// UK Date Sorting 
jQuery.fn.dataTableExt.oSort['uk_date-asc'] = function(a,b) { 
    var ukDatea = a.split('/'); 
    var ukDateb = b.split('/'); 

    var x = (ukDatea[2] + ukDatea[1] + ukDatea[0]) * 1; 
    var y = (ukDateb[2] + ukDateb[1] + ukDateb[0]) * 1; 

    return ((x < y) ? -1 : ((x > y) ? 1 : 0)); 
}; 

jQuery.fn.dataTableExt.oSort['uk_date-desc'] = function(a,b) { 
    var ukDatea = a.split('/'); 
    var ukDateb = b.split('/'); 

    var x = (ukDatea[2] + ukDatea[1] + ukDatea[0]) * 1; 
    var y = (ukDateb[2] + ukDateb[1] + ukDateb[0]) * 1; 

    return ((x < y) ? 1 : ((x > y) ? -1 : 0)); 
} 


$(document).ready(function() { 

    $('#table').dataTable({ 
     "bPaginate": true, 
     "bLengthChange": true, 
     "bFilter": true, 
     "aoColumnDefs" : [ 
      { "aTargets" : ["uk-date-column"] , "sType" : "uk_date"} 
     ] 
    }); 

}); 

任何帮助非常赞赏。

Answer 1

问题是你的排序功能被额外的html弄糊涂了。你应该修改你这样的功能：

// UK Date Sorting 
jQuery.fn.dataTableExt.oSort['uk_date-asc'] = function(a,b) { 
    //use text() 
    var ukDatea = $(a).text().split('/'); 
    var ukDateb = $(b).text().split('/'); 

    var x = (ukDatea[2] + ukDatea[1] + ukDatea[0]) * 1; 
    var y = (ukDateb[2] + ukDateb[1] + ukDateb[0]) * 1; 

    return ((x < y) ? -1 : ((x > y) ? 1 : 0)); 
}; 

jQuery.fn.dataTableExt.oSort['uk_date-desc'] = function(a,b) { 
    //use text() 
    var ukDatea = $(a).text().split('/'); 
    var ukDateb = $(b).text().split('/'); 

    var x = (ukDatea[2] + ukDatea[1] + ukDatea[0]) * 1; 
    var y = (ukDateb[2] + ukDateb[1] + ukDateb[0]) * 1; 

    return ((x < y) ? 1 : ((x > y) ? -1 : 0)); 
} 

小提琴这里http://jsfiddle.net/GUb2n/

Answer 2

你可以尝试把（ISO格式）的日期在一个无形的容器中链接的前面：

<span style="display: none;">2001-01-01</span><a href="#">01/01/01</a> 

然后字母排序应该工作。

Answer 3

（v1.9.4）该解决方案不仅解决您的排序困境，但还修复了过滤问题，因为通常的过滤器对HTML匹配，因此搜索诸如href或div之类的内容最终会匹配所有行。

它除掉了mRender选项里面的HTML，然后从数据表运行mRender功能多次缓存结果。

JsFiddle Example

警告为可编辑的表

可编辑的表格可能由于缓存机制的问题。

第一步

包括以下JavaScript某处：

var stripHtml = (function() { 
    var tmpDiv = document.createElement("DIV"); 
    return function(html) { 
     tmpDiv.innerHTML = html; 
     return $.trim(tmpDiv.textContent || tmpDiv.innerText); 
    }; 
})(); 

var mRenderFactory = function (colIndex) { 
    return function (data, type, full) { 
     var cache = MRenderCache.getCache(full); 

     if (type === "filter" || type === "sort" || type === "type") { 
      return cache.getOrElse(colIndex, data, stripHtml) 
     } 
     return data; 
    }; 
}; 

var MRenderCache = function() { 
    this.full = []; 
} 
MRenderCache.getCache = function (full) { 
    var cache = full[full.length - 1]; 
    if (cache == null || !cache.MRenderCache) { 
     cache = new MRenderCache(); 
     full.push(cache); 
    } 
    return cache; 
} 
MRenderCache.prototype.MRenderCache = true; 
MRenderCache.prototype.getOrElse = function (colIndex, rawData, convert) { 
    var result = this.full[colIndex]; 
    if (result === undefined) { 
     result = convert(rawData); 
     this.full[colIndex] = result; 
    } 
    return result; 
} 

步骤2

你想要剥去HTML的任何列设置"mRender": mRenderFactory(i)内aoColumns其中i是指数该列。你得到正确的i，因为如果你不那么该表将显示正常，但会进行排序和筛选上错列是非常重要的。

你的初始化代码会是这个样子：

$(document).ready(function() { 
    $('#example').dataTable({ 
     "aoColumns": [ 
      null, 
      null, 
      { "mRender": mRenderFactory(2) }, 
      { "mRender": mRenderFactory(3) }, 
      null 
     ] 
    }); 
}); 

Answer 4

IIRC，linkified数据的不当排序与数据表试图从表格单元格的内容剥离HTML的方式做（使用简化的正则表达式），它似乎无法从单元格中完全提取日期数据。

数据表1.10+可以使用HTML 5 data attributes避免这个问题。

如果你有一组<td>标签的链接，就像这样：

<td><a href = "someobject">28 July 2015</a></td> 

您可以将data-order属性添加到您的<td>标签：

<td data-order="2015-07-28"><a href = "someobject">28 July 2015</a></td> 

这data-order属性让数据表排序在data-order属性上，并将您的<td>标签之间的内容仅用作显示数据。