2017-04-30 1 views
1

어떻게 사용자 지정 렌더링 된 콘텐츠 대신 데이터에 전달 된 값으로 열을 정렬 할 수 있습니까?JQuery Datatables : 데이터로 정렬

내가

했을 내가 데이터를 표시하는 JQuery와 datatables를 사용합니다. 서버에서 클라이언트로 숫자 데이터 만 전달합니다. 클라이언트 측면에서 사용자 지정 렌더링 함수를 사용하여 테이블 내용을 만듭니다.

{ 
    "targets": [9], 
    "visible": true, 
    "searchable": true, 
    "render": function(data, type, row) { 

     if (row[9] == -2) { 
      return ''; 
     } 
     if (row[9] == -1) { 
      return '<img width="20px" src="/~home/www/images/loader.gif" />'; 
     } 
     var result = row[9]; 
     if (row[10] > 0) { 
      result += '<strong><span class="text-success">'; 
      result += '(+' + row[10] + ')'; 
      result += '</span></strong>'; 
     } 
     if (row[10] < 0) { 
      result += '<strong><span class="text-danger">'; 
      result += '(' + row[10] + ')'; 
      result += '</span></strong>'; 
     } 
     return result; 
    }, 
}, 
{ 
    "targets": [10, 11], 
    "visible": false, 
    "searchable": false, 
}, 

심지어 9,10,11 열은 숫자 값만 포함합니다. 열 9는 제공된 JS 함수에 의해 생성 된 문자열 값을 기반으로 문자열로 정렬됩니다.

데이터 테이블에 원본 'row [9]'로 정렬하고 셀에 사용자 정의 렌더링 된 내용을 유지하도록 지시하는 방법은 무엇입니까?

답변

1
"render": function(data, type, row) { 
         ^^^^ 

type의 목적은 다른 작업에 대해 서로 다른 값을 반환 할 수 있습니다. 기본적으로 type'filter', 'display' 또는 'sort' 일 수 있습니다. 모든 경우에 이 표시된 열을으로 표시하므로 데이터 값에 따른 숫자 정렬이 아닌 렌더링 된 내용을 기반으로 알파 정렬을 얻습니다. 요청 유형은 'display' 경우에만, 다른 마크 업 문자열을 반환 그렇지 않으면 반환 원래 data :

{ 
    "targets": [9], 
    "visible": true, 
    "searchable": true, 
    "render": function(data, type, row) { 
    if (type == 'display') { 
     if (row[9] == -2) { 
     return ''; 
     } 
     if (row[9] == -1) { 
     return '<img width="20px" src="/~home/www/images/loader.gif" />'; 
     } 
     var result = row[9]; 
     if (row[10] > 0) { 
     result += '<strong><span class="text-success">'; 
     result += '(+' + row[10] + ')'; 
     result += '</span></strong>'; 
     } 
     if (row[10] < 0) { 
     result += '<strong><span class="text-danger">'; 
     result += '(' + row[10] + ')'; 
     result += '</span></strong>'; 
     } 
     return result; 
    } else { 
     return data 
    } 
    } 
} 
+0

그게 전부를 당신에게 데이비드 감사합니다 – Michal

0

당신은 보이지 않는 태그에 원본 데이터를 마무리하고 다음과 같이 출력에 추가 할 수 있습니다 :

if (row[9] == -2) { 
     return '<span style="display:none"></span>'; 
    } 
    if (row[9] == -1) { 
     return '<span style="display:none">'+ row[9] +'</span><img width="20px" src="/~home/www/images/loader.gif" />'; 
    } 
    var result = '<span style="display:none">'+ row[9] +'</span>' + row[9]; 

그래서 행 span에 숨겨진 데이터에 의해 순서 일 것이다.