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

캐싱 메커니즘으로 인해 문제가있을 수 있습니다 편집 가능한 테이블

편집 가능한 테이블 경고.i가의 인덱스입니다

당신이 제거 HTML을 원하는 열을 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; 
} 

단계 :

은 1 단계는

어딘가에 다음과 같은 자바 스크립트를 포함 란. i을 입력하지 않으면 표가 잘 표시되지만 잘못된 열을 기준으로 정렬되고 필터링되기 때문에 올바르게 입력하는 것이 중요합니다.

당신은 초기화 코드는 다음과 같이 보일 것입니다 :

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

Answer 4

IIRC을 linkified 데이터의 잘못된 정렬은을 사용하여 (DataTables 테이블 셀의 내용에서 HTML을 제거하려고 시도하는 방식과 관련이있다 단순화 된 regexp) 셀에서 날짜 데이터를 완전히 추출 할 수없는 것 같습니다.

DataTables 1.10+는이 문제를 방지하기 위해 HTML 5 data attributes을 사용할 수 있습니다.

이 같은 <td> 태그 집합에있는 링크가있는 경우 :

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

당신이 당신의 <td> 태그에 data-order 속성을 추가 할 수 있습니다 :이 data-order 속성 DataTables를 정렬 할 수

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

을 data-order 속성에 표시하고 <td> 태그 사이의 콘텐츠를 표시 데이터로만 사용하십시오.