2012-07-30 5 views
1

tablesorter를 사용하고 있고 여러 div가있는 열을 정렬하는 방법을 알아 내려고하고 있습니다. 특히 "prog-perc"div에서 퍼센트로 열을 정렬해야합니다.jQuery tablesorter 여러 div가있는 열 정렬

나는 맞춤 구문 분석기/텍스트 추출을 이해하는 데 어려움을 겪었으므로 가능한 경우 프로세스를 설명하는 답변을 찾고 있습니다. 비율 파서가이를 감지한다으로

HTML

<td class="transaction-table-hide"> 
    <span class="status">&{enums.Select.ISCTDealStatus.values()[transaction?.status].name}</span> 
    <div class="prog-container"> 
    <a href="#" class="form-info" rel="tooltip" title=""> 
    <div class="progress rounded clearfix"> 
     <div class="prog-quart fl">&nbsp;</div> 
     <div class="prog-half fl">&nbsp;</div> 
     <div class="prog-three-quart fl">&nbsp;</div> 
      <div class="prog-perc">10%</div> 
     </div> 
     </a> 
    </div> 
</td> 

$.tablesorter.addParser({ 
     id: 'currencyExtract', 
     is: function(s) { 
      return false; 
     }, 
     format: function(s) { 
      return s 
      .replace(/ AUD/,0) 
      .replace(/ BHD/,0) 
      .replace(/ BBD/,0) 
      .replace(/ CAD/,0) 
      .replace(/ CNY/,0) 
      .replace(/ HRK/,0) 
      .replace(/ CZK/,0) 
      .replace(/ DKK/,0) 
      .replace(/ XCD/,0) 
      .replace(/ EGP/,0) 
      .replace(/ MTL/,0) 
      .replace(/ EUR/,0) 
      .replace(/ HKD/,0) 
      .replace(/ HUF/,0) 
      .replace(/ INR/,0) 
      .replace(/ ILS/,0) 
      .replace(/ JMD/,0) 
      .replace(/ JPY/,0) 
      .replace(/ JOD/,0) 
      .replace(/ KES/,0) 
      .replace(/ LVL/,0) 
      .replace(/ LTL/,0) 
      .replace(/ MUR/,0) 
      .replace(/ MXN/,0) 
      .replace(/ MAD/,0) 
      .replace(/ NZD/,0) 
      .replace(/ NOK/,0) 
      .replace(/ OMR/,0) 
      .replace(/ PLN/,0) 
      .replace(/ GBP/,0) 
      .replace(/ QAR/,0) 
      .replace(/ RON/,0) 
      .replace(/ RUB/,0) 
      .replace(/ SAR/,0) 
      .replace(/ SGD/,0) 
      .replace(/ ZAR/,0) 
      .replace(/ SEK/,0) 
      .replace(/ CHF/,0) 
      .replace(/ THB/,0) 
      .replace(/ THD/,0) 
      .replace(/ TRY/,0) 
      .replace(/ AED/,0) 
      .replace(/ USD/,0) 
      ; 
     }, 
     type: 'numeric' 
    }); 

    $("#sorTable").tablesorter({ 
     headers:{ 
      1:{ 
       sorter: 'shortDate' 
      }, 
      3:{ 
       sorter: 'currencyExtract' 
      }, 
      4:{ 
       sorter: 'currencyExtract' 
     }, 
      5:{ 
       sorter: false 
      } 
     }, 
     textExtraction: function(node){ 
      return node.childNodes[0].nodeValue; 
     }, 
     /*textExtraction: function(node) { 
      var $n = $(node), $p = $n.find('.prog-perc'); 
      return $p.length ? $p.text() : $n.text(); 
     },*/ 
     widgets: ['zebra'], 
     dateFormat: "uk" 
    }).tablesorterPager({container: $("#pager")}); 
+0

정렬 방식의 일반적인 방법은 내 대답을 참조하십시오. http://stackoverflow.com/a/12920117/1544054 – Aviko

답변

1

$('table').tablesorter({ 
     // define a custom text extraction function 
     textExtraction: function(node) { 
      var $n = $(node), $p = $n.find('.prog-perc'); 
      // extract data from markup and return it 
      return $p.length ? $p.text() : $n.text(); 
     } 
}); 

% 기호에 대해 걱정하지 마십시오 사업부 ( demo)을 대상으로 textExtraction 옵션을 사용합니다.

+0

감사합니다. –

+0

이것은 나를 위해 일했으나 그것이 내 다른 textExtraction을 죽였다는 것을 깨닫지 못했습니다. 전체 tablesorter 스크립트를 추가했습니다. 대답을 모두 포함하여 편집 할 수 있습니까? 감사합니다 –

+0

아마도 더 나은 옵션은 [tablesorter] (http://mottie.github.com/tablesorter/docs/example-option-text-extraction.html)의 내 포크를 사용하는 것입니다. 열에 대해 특정 textExtraction 함수를 추가 할 수 있습니다. – Mottie

관련 문제