2014-09-19 2 views
2

열의 정렬 동작을 변경하는 플러그인을 만들려고합니다. 열의 데이터는 <ul> 요소입니다. 목록의 각 <li> 요소 내에는 일부 텍스트와 10 진수가 있습니다. 셀의 목록에서 가장 큰 십진수를 기준으로 표를 정렬하고 싶습니다. 여기에 플러그인을 보여주는 jsfiddle, 그리고 당신이 볼 수있는 두 번째 열을 정렬 할 때, 그것이 제대로 작동하지 않습니다 : 그것은 일 경우Jquery DataTables 맞춤 정렬 플러그인이 작동하지 않습니다.

http://jsfiddle.net/flyingL123/1whzq1w2/3/

는 내림차순 샘해야한다 (97.50)을, 조 (80.50), 마이크 (17.50), 그리고 오름차순 물론 반대해야합니다. 내 디버깅을 기반으로, 플러그인은 각 셀에 대해 올바른 숫자 값을 반환합니다. 테이블이 적절하게 정렬되지 않는 이유를 알고 있습니까?

$.fn.dataTable.ext.order['number-list'] = function (settings, col) 
{ 
    return this.api().column(col, {order:'index'}).nodes().map(function (td, i) { 

        //get all numbers from the cell into an array and parseFloat each one 
        var nums = $(td).html().match(/(\d+.\d+)/); 

        if(nums){ 
          nums = nums.map(function(val){return parseFloat(val, 10);}); 
          return Math.max.apply(null, nums); 
        } 
        else{ 
          return 0; 
        } 
      }); 
} 

답변

2

참고 : 여기에

플러그인에서 코드이 대답은 완전히 다시 작성됩니다. dataTables가 정렬 기반 유형을 부르는 원래의 대답이었다 정의 정렬 dataTables 및 사용자 정의 데이터 소스
소개

. dataTables는 기본 "프리미티브"또는 유형 (정렬 유형 : string, numeric, datehtml)에 대해 태어났습니다. 기본적으로 dataTables는 열에 포함 된 데이터 유형을 추측 한 다음 사용자가 테이블 헤더를 클릭하면 해당 유형에 따라 테이블이 정렬됩니다. 어떻게 든 필요하다면 sType/type 옵션 (예 : sType : 'string')을 사용하거나 데이터 테이블이 올바른 유형을 감지하지 못하면 유형을 특정 열로 설정할 수 있습니다. 예를 들어 열을 숫자로 정렬하되 dataTables을 알파벳 순서로 정렬하려면 sType : 'numeric'을 설정할 수 있습니다.

분명히 내장 된 정렬 기능이 예제와 같이 항상 모든 요구 사항을 충족시키는 것은 아닙니다. 이 경우 원본 답변에서 보았거나 다른 맞춤 정렬 플러그인에서 본 것처럼 새 type을 만들 수 있습니다. 예 : type-pre, type-desc, type-asc 다음에 oSort에 개체를 추가하십시오. 이러한 함수 정의는 필수는 아니지만 데이터 테이블이 응답 할 것입니다. 예를 들어 type-pre - 전처리 함수 -는 필수는 아니지만 실제 분류 기능이 호출되기 전에 내용에 특별한 대우가 필요한 경우 매우 유용합니다.

dom-text (및 이와 유사한)은 기본적으로 독립형 type-pre입니다. 이는 정렬 알고리즘이 열 내용의 특정 부분을 정렬하기를 원하지만 완전히 새로운 정렬 알고리즘이 필요하지 않은 경우에 유용합니다. dataTables은이를 custom data source sorting으로 정의합니다. 예를 들어 firstname lastname과 같은 이름의 열이 있지만 lastname을 정렬하려는 경우이 방법을 사용합니다.

아주 좋은 점은 위의 모든 것을 결합 할 수 있다는 것입니다. 기본 정렬, 기본 형식 검색, 강제 형식, 사용자 지정 정렬 플러그 인 및 사용자 지정 데이터 원본

그리고 여기에 우리는 나 자신에게 내가 특별한 정렬 알고리즘을 필요로 많은 경우가 :(당황 부분을, 그래서 난 그렇게 을왔다 간단히 말해서 나는 당신이 무엇인지 간과 함께 일종의 플러그인 사용자 정의 슬램하는 데 사용 하려고 생각한다 :(나는 정말로 상황을 정확하게 생각하지 않는다. 그러나 obviosly 나는 9am에 커피를 마시는 동안 당신의 질문을 보았고, 자동 조종 장치와 같은 주문의 분류 플러그 접속 식으로 대답했다.

나는 당신이 이상하게 여기고있는 이유를 볼 수있다 - 당신은 옳다. 질문에있는 코드도 옳다. 내가 위에서 쓴 것을 고려해 보라 : 당신이 필요로하는 것은 custom data source과 내장형 타입 numeric의 조합이다. 진짜 대답은 당신이 너무 클로이 였다는 것이다. 기본 정렬 유형이 string이므로 type을 설정하는 것을 잊었습니다. 따라서

var myDataTable = $('#myTable').DataTable({ 
    "columns":[ 
     null, 
     {"orderDataType":"number-list", type: 'numeric'} // <--- just set the type to numeric 
    ], 
    "order":[], 
}); 

및 thats it! 여기에 원래의 바이올린이 있습니다 ->http://jsfiddle.net/rd0p6ts8/

죄송합니다. 어쨌든 대답을 수락하기를 바랍니다.

+1

이 방법이 효과가 있지만 작동 원리가 확실하지 않습니다. 나는 또한 여기에있는'dom-text' 플러그인을 사용하고있다 : https://datatables.net/plug-ins/sorting/custom-data-source/dom-text. 왜이 정의가 다르게 정의되어 있습니까? 구현하려고 시도한 커스텀 정렬은이'dom-text' 플러그인이하는 것과 똑같은 일을하는 것이 었습니다. 왜 다르게 정의되어 있습니까? – flyingL123

+0

@ flyingL123 - 답변을 완전히 다시 작성했습니다. 왜 당신이 궁금해하는지 이해하십시오. 비록 기능에 관해서는 내 대답이 효과가 있었지만 실제 답변은 새로운 분류 알고리즘을 만들지 않고도 매우 간단하기 때문에 진짜 대답은 아니 었습니다. 좋은 대답은 문제를 스스로 해결해야하며 바퀴를 재발 명하지 않아야합니다. Appearently 내가 첫 번째 대답을했을 때 생각하지 않았습니다 : ( – davidkonrad

관련 문제