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选项定位该div（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(); 
        } 
});

不要担心%符号，因为百分比解析器应检测它。

jQuery tablesorter排序列有多个div

1 个答案: