Question

I am using tablesorter and I’m trying to figure out how to sort a column with multiple divs. Specifically I need to sort the column by the percentage in the “prog-perc” div.

I’ve struggled with understanding the custom parser/text extraction so if possible I’m looking for an answer that explains the process.

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

Use the textExtraction option to target that 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(); 
        } 
});

​Don’t worry about the % sign as the percentage parser should detect it.