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>標籤之間的內容僅用作顯示數據。