do not take into account R symbol on tablesorter

Question

I have a html table that I am trying to sort using tablesorter (I believe that I have the most recent version). The problem is that when I sort on certain columns the resultant sort is not in order. To be specific each number within my columns has a "R" character is front of it (short hand for South African Rand) and when I sort columns it sorts only on the first digit not all of them. E.g. R100 comes before R70 on a sort. My html looks like this:

    <div class="table-responsive container-fluid">
    <table id="BrokerTable" class="table table-bordered table-hover tablesorter">
    <thead>
        <tr>
            <th class="col-md-2">Broker<span class="glyphicon glyphicon-chevron-down headimage"></span></th>
            <th class="col-md-2">Base Transaction Fee<br> (per trade)<span class="glyphicon glyphicon-chevron-down headimage"></span></th>      
            <th class="col-md-2">Minimum Transaction Fee<br> (per trade)<span class="glyphicon glyphicon-chevron-down headimage"></span></th>
            <th class="col-md-2">Monthly Management Fee<br> (exc. VAT)<span class="glyphicon glyphicon-chevron-down headimage"></span></th>
            <th class="col-md-2">Allows limit orders<br> (required for placing orders outside of trading hours)<span class="glyphicon glyphicon-chevron-down headimage"></span></th>
            <th class="col-md-2">Allows stop-loss orders<span class="glyphicon glyphicon-chevron-down headimage"></span></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><p>28E Capital</p></td>
            <td><p>0.7% : R0-R49,999<br>0.5% : R50,000-R499,999<br>0.4% : R500,000-R999,999<br>0.35% : R1,000,000+</p></td>
            <td><p>R125</p></td>
            <td><p>R40</p></td>
            <td><p><b class="greenTick">&#x2713;</b></p></td>
            <td><p><b class="greenTick">&#x2713;</b></p></td>
        </tr>
        <tr>
            <td><p>ABSA</p></td>
            <td><p>0.4%</p></td>
            <td><p>R120</p></td>
            <td><p>R67</p></td>
            <td><p><b class="greenTick">&#x2713;</b></p></td>
            <td><p><b class="redcross">&#x2718;</b></p></td>
        </tr>
        <tr>
            <td><p>AfriFocus</p></td>
            <td><p>0.5%</p></td>
            <td><p>R125</p></td>
            <td><p>R65</p></td>
            <td><p><b class="greenTick">&#x2713;</b></p></td>
            <td><p><b class="greenTick">&#x2713;</b></p></td>
        </tr>
    </tbody>
    </table>

And my tablesorter js is:

    <script>
    $(document).ready(function() {
    $("#BrokerTable").tablesorter( {sortList: [[1,0]]} ); 
        } 
    ); 
</script>

If anyone knows how to make this work it would be great.

Jack

Answer 1

I think the actual issue is that the original tablesorter (v2.0.5) does not perform an alphanumeric sort.

I made a fork of tablesorter with lots of improvements. It does perform an alphanumeric sort.

I created a demo from the HTML you provided, but it didn't have R100 or R70 in it, so I added them...

$(function () {
    $("#BrokerTable").tablesorter({
        sortList: [[1,0]],
        theme: 'blue'
    });
});