jQuery tablesorter與多個div的排序列

Question

我正在使用tablesorter，我想弄清楚如何排序與多個div的列。具體而言，我需要按照「prog-perc」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")}); 

Answer 1

使用textExtraction選項來指定該分區（demo）

$('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(); 
     } 
}); 

不要擔心%的符號的百分比解析器應檢測到它。