2016-12-14 1 views
0

나는 꽤 표준적인 방법으로 DataTables 플러그인을 사용하고 있습니다."데이터가 없음"일 때 행을 다르게 정렬

jQuery('#languages_table').DataTable({ 
    pageLength: 100, 
    columns: [ 
     { orderDataType: "dom-text" }, 
     { orderDataType: "dom-text" }, 
     { orderDataType: "dom-text" }, 
     { orderDataType: "dom-text", type: "num" }, 
     { orderable: false }, 
     { orderable: false } 
    ] 
    }); 

그러나, 세포가 아무런 정보가없는 경우에, 그래서 데이터가없는 같은 것을 보여줄 필요가 :이 ready 이벤트 내용입니다.

이것은 분명히 원치 않는 장소에서 정렬 시스템 (특히 숫자 열)을 망칠 수 있습니다.

은 이미 완전히 비어 셀하여 숫자에 대해이 문제를 제거하는 관리 (그래서 아무 글을 자료 없음 모두) 및 CSS로 텍스트 추가 :

#languages_table td:empty::before { 
    content: "no data"; 
} 

이 방법을 셀은 0으로 계산되고 내림차순으로 검색되므로 맨 아래에 나타납니다 (이 방식으로 숫자를 정렬하는 것이 훨씬 유용합니다).

그것은 끔찍한 일이며 (번역을위한 고통), 트릭을합니다.

이제는 텍스트 셀에도 같은 것이 필요하지만,이 경우 정렬은 빈 셀을 오름차순 검색의 맨 아래에 놓아야합니다 (이 경우에는 흥미 롭습니다). 하기 위해서.

이러한 엣지 케이스를 수동으로 처리 할 수있는 방법이 있습니까?

답변

0

사용자 지정 정렬 기능이 필요합니다. 정의한 사용자 정의 유형으로 범위를 지정할 수 있습니다. 이 같은 옵션을 추가 columnDefs에서 다음

$.extend($.fn.dataTableExt.oSort, { 
    "null-last-pre": function (a) { 
     // Preprocess data if you need to. Currently doing nothing 
     return a; 
    }, 

    "null-last-asc": function(a, b) { 
     return (a===null)-(b===null) || +(a>b)||-(a<b); 
    }, 

    "null-last-desc": function(a,b) { 
     return (a===null)-(b===null) || -(a>b)||+(a<b); 
    } 
}); 

: 한 데이터가 ""널 (null) "나처럼 당신의 열 정의에서와 :

columnDefs: [ 
    { type: 'null-last', targets: [0,1,2,3,4,5] } 
] 

또한" 'NUM'유형을 '제거 undefined "를 선택하면 올바르게 정렬됩니다. 'num'유형의 유형 변환이 필요하면 대상 배열에서 '3'을 제거하십시오. 어떤 유형이 우선 순위 (columnDef 또는 column)인지 확실하지 않습니다.

관련 문제