빈 셀을 무시하기 위해 정렬 (사전 순) : dataTables

Question

질문은 이미 here으로 질문되었지만 솔루션이 저에게 맞지 않습니다. 알파벳 순서 ("type": "natural")로 테이블을 정렬하고 싶지만 빈 셀을 밑줄 (desc와 asc)로 사용하고 싶습니다. 단지 노래와 가수에 정렬 | N° | Edit | Song | Singer | Url | 같은 테이블

$(document).ready(function() { 
    $('#classement').dataTable({ 
    "aoColumns": [ 
     null, 
     null, 
     { "type" : "mystring" }, 
     { "type" : "mystring" }, 
     null 
    ] 
    }); 
}); 

:

jQuery.fn.dataTableExt.oSort['mystring-asc'] = function(x,y) { 
    var retVal; 
    x = $.trim(x); 
    y = $.trim(y); 

    if (x==y) retVal= 0; 
    else if (x == "" || x == " ") retVal= 1; 
    else if (y == "" || y == " ") retVal= -1; 
    else if (x > y) retVal= 1; 
    else retVal = -1; // <- this was missing in version 1 

    return retVal; 
} 
jQuery.fn.dataTableExt.oSort['mystring-desc'] = function(y,x) { 
    var retVal; 
    x = $.trim(x); 
    y = $.trim(y); 

    if (x==y) retVal= 0; 
    else if (x == "" || x == "&nbsp;") retVal= -1; 
    else if (y == "" || y == "&nbsp;") retVal= 1; 
    else if (x > y) retVal= 1; 
    else retVal = -1; // <- this was missing in version 1 

    return retVal; 
} 

으로 :

나는 FBAS에 의해 주어진 이전 솔루션을 시도했다.

emty 셀은 아래쪽에 있습니다 (예상대로). 그러나 정렬에는 논리가 없습니다 (알파벳순이 아니므로 dataTable의 다른 속성을 사용해야합니까?).

해결책이있는 사람이 있습니까?

편집 : 동적으로 줄을 추가하는 경우 정렬을 새로 고치는 방법은 무엇입니까?

$("#example").find('tbody') 
    .append($('<tr>') 
     .append($('<td>') 
       .text('Boro') 
      )  
    ); 

JsFiddle (use isim's one)

Answer 1

UPDATE : 스택 코드 조각 임베디드.

은 DataTables v 1.9의 경우 legacy option입니다. 즉, 사용자 정의 정렬 기능을 포함하려면 $.extend을 사용해야 할 수도 있습니다.

아래의 스택 스 니펫 또는이 라이브 데모를 jsfiddle에서 확인하십시오. 요약하면 테이블 활성화 중에 name 열을 non-empty-string 유형으로 정의합니다. 그런 다음 non-empty-string-asc 및 non-empty-string-desc 정렬 함수를 사용하여 jQuery.fn.dataTableExt.oSort API를 확장했습니다. 이것이 당신이 찾고있는 것인지 확인하십시오.

스택 발췌문 :

jQuery.extend(jQuery.fn.dataTableExt.oSort, { 
 
    "non-empty-string-asc": function (str1, str2) { 
 
     if(str1 == "") 
 
      return 1; 
 
     if(str2 == "") 
 
      return -1; 
 
     return ((str1 < str2) ? -1 : ((str1 > str2) ? 1 : 0)); 
 
    }, 
 
    
 
    "non-empty-string-desc": function (str1, str2) { 
 
     if(str1 == "") 
 
      return 1; 
 
     if(str2 == "") 
 
      return -1; 
 
     return ((str1 < str2) ? 1 : ((str1 > str2) ? -1 : 0)); 
 
    } 
 
}); 
 

 

 
var dataTable = $('#example').dataTable({ 
 
    columnDefs: [ 
 
     {type: 'non-empty-string', targets: 0} // define 'name' column as non-empty-string type 
 
    ] 
 
}); 
 
dataTable.api().row.add(['John Smith', 'Intern', 'San Francisco', 19, 2011/05/25, 62000]).draw();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"></script> 
 
<link href="http://cdn.datatables.net/1.10.2/css/jquery.dataTables.css" rel="stylesheet"/> 
 

 
<table id="example" class="display" cellspacing="0" width="100%"> 
 
    <thead> 
 
     <tr> 
 
      <th>Name</th> 
 
      <th>Position</th> 
 
      <th>Office</th> 
 
      <th>Age</th> 
 
      <th>Start date</th> 
 
      <th>Salary</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr> 
 
      <td>Tiger Nixon</td> 
 
      <td>System Architect</td> 
 
      <td>Edinburgh</td> 
 
      <td>61</td> 
 
      <td>2011/04/25</td> 
 
      <td>$320,800</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Garrett Winters</td> 
 
      <td>Accountant</td> 
 
      <td>Tokyo</td> 
 
      <td>63</td> 
 
      <td>2011/07/25</td> 
 
      <td>$170,750</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Ashton Cox</td> 
 
      <td>Junior Technical Author</td> 
 
      <td>San Francisco</td> 
 
      <td>66</td> 
 
      <td>2009/01/12</td> 
 
      <td>$86,000</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Cedric Kelly</td> 
 
      <td>Senior Javascript Developer</td> 
 
      <td>Edinburgh</td> 
 
      <td>22</td> 
 
      <td>2012/03/29</td> 
 
      <td>$433,060</td> 
 
     </tr> 
 
     
 
     <tr> 
 
      <td></td> 
 
      <td>Junior Technical Author</td> 
 
      <td>San Francisco</td> 
 
      <td>66</td> 
 
      <td>2009/01/12</td> 
 
      <td>$86,000</td> 
 
     </tr> 
 
     <tr> 
 
      <td></td> 
 
      <td>Senior Javascript Developer</td> 
 
      <td>Edinburgh</td> 
 
      <td>22</td> 
 
      <td>2012/03/29</td> 
 
      <td>$433,060</td> 
 
     </tr> 
 
     
 
    </tbody> 
 
</table>

Answer 2

내 두 번째 문제에 대한 해결책을 발견 좋아, Here

그래서 그냥 내 아약스 요청하기 전에 데이터 테이블을 파괴하고 재 구축 참조 성공시 :

else{ 
     // Destroy dataTable 
     $('#classement').dataTable().fnDestroy(); 
     $.ajax({ 
      type: "POST", 
      url: "ajax.php", 
      data: {}, 
      success: function(msg){ 
       // Reload dataTable with sorting 
       $('#classement').dataTable({ 
        columnDefs: [ 
         {type: 'non-empty-string', targets: [2,3]} // define 'name' column as non-empty-string type 
        ] 
       }); 
      } 
     }); 
    } 

예 : JsFiddle