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を取り除き、DataTablesがmRender関数を複数回実行するため、結果をキャッシュします。

JsFiddle Example

編集可能な表の警告

編集可能なテーブルは、キャッシングメカニズムによる問題を有していてもよいです。

ステップ1

どこかに次のJavaScriptを含める：すべての列にaoColumns内"mRender": mRenderFactory(i)を設定

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

あなたはiでの指標である剥ぎ取らHTMLをしたいです列。 iをお持ちでない場合、テーブルは正常に表示されますが、間違った列で並べ替えてフィルタリングするので、非常に重要です。

あなたは初期化コードは、次のようなものになります：

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

Answer 4

IIRCを、linkifiedデータの不適切な分類が使用して（DataTableのテーブルセルの内容からHTMLを取り除くしようとする方法に関係しています単純化された正規表現）、セルから日付データを完全に抽出できないようです。

DataTables 1.10+ではHTML 5 data attributesを使用してこの問題を回避できます。

あなたは、このような<td>タグのセット内のリンク、お持ちの場合：

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

はあなた<td>タグにdata-order属性を追加することができます。このdata-order属性はDataTableのをソートすることができます

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

をdata-order属性で、<td>タグのコンテンツを表示データとしてのみ使用します。