2012-05-03 3 views
1

jQuery 테이블 분류기를 사용하여 테이블을 정렬하고 있습니다. 날짜 필드가있는 열을 제외한 모든 열을 정렬합니다. 날짜는 Sep 3, 2012이이 형식입니다. 이 문제를 해결하는 방법?jQuery Tablesorter - 날짜 필드를 정렬하지 않습니다.

샘플 날짜 :

  • 2012년 9월 3일
  • 2012년 6월 25일
  • 8월 9일,
+2

와 함께 작동합니다 - http://tablesorter.com/docs/ - 왜 있나요 다른 형식의 날짜, (M d, Y), (DMY) 등? 모든 날짜를 한 형식 (예 : Md Y)으로 지정하면 문제가 해결됩니다. – Nadh

답변

1

2012 당신이 파서를 작성할 수 있습니다 tablesorter에의 포크가 그 data-attribute과 같은 테이블 셀 속성에서 데이터를 추출 할 수 있습니다.

this example 다른 형식의 생일 열이 있지만 셀의 data-date 특성이 일관됩니다.

<table> 
<thead> 
    <tr> 
    <th>Name (Last)</th> 
    <th>Originally from...</th> 
    <th>Birthday</th> 
    </tr> 
</thead> 
    <tbody> 
    <tr> 
     <td data-lastname="Allen">Joe Allen</td> 
     <td>South Carolina</td> 
     <td data-date="01-15">Jan 15</td> 
    </tr> 
    <tr> 
     <td data-lastname="Torres">Lisa Torres</td> 
     <td>Maryland</td> 
     <td data-date="03-02">March 2nd</td> <!-- leading zeros needed to sort properly! --> 
    </tr> 
    <tr> 
     <td data-lastname="Franklin">Peter Louis Franklin</td> 
     <td>Coventry</td> 
     <td data-date="12-26">Boxing Day (Dec 26th)</td> 
    </tr> 
    <tr> 
     <td data-lastname="Jones">Maria Consuela de Los Angeles Ortiz Del Toro-Jones</td> 
     <td>Texas</td> 
     <td data-date="05-10">10 Mayo</td> 
    </tr> 
    <tr> 
     <td data-lastname="Bigglesworth">Mike "the Smasher" Bigglesworth</td> 
     <td>Rhode Island</td> 
     <td data-date="06-22">22nd of June</td> 
    </tr> 
    <tr> 
     <td data-lastname="Smith">Fredrick Smith</td> 
     <td>Ohio</td> 
     <td data-date="03-10">10th Mar</td> 
    </tr> 
    </tbody> 
</table> 

파서 -이 파서 코드를주의 만 this modified version of tablesorter

// add parser through the tablesorter addParser method 
$(function(){ 

    $.tablesorter.addParser({ 
    // set a unique id 
    id: 'data', 
    is: function(s) { 
     // return false so this parser is not auto detected 
     return false; 
    }, 
    format: function(s, table, cell, cellIndex) { 
     var $cell = $(cell); 
     // I could have used $(cell).data(), then we get back an object which contains both 
     // data-lastname & data-date; but I wanted to make this demo a bit more straight-forward 
     // and easier to understand. 

     // first column (zero-based index) has lastname data attribute 
     if (cellIndex === 0) { 
     // returns lastname data-attribute, or cell text (s) if it doesn't exist 
     return $cell.attr('data-lastname') || s; 

     // third column has date data attribute 
     } else if (cellIndex === 2) { 
     // return "mm-dd" that way we don't need to use "new Date()" to process it 
     return $cell.attr('data-date') || s; 
     } 

     // return cell text, just in case 
     return s; 
    }, 
    // set type, either numeric or text 
    type: 'text' 
    }); 

    $('table').tablesorter({ 
    headers : { 
     0 : { sorter: 'data' }, 
     2 : { sorter: 'data' } 
    }, 
    widgets: ['zebra'] 
    }); 

}); 
여기 예제는 잘 날짜를 정렬
관련 문제