I am working on jquery plugin tablesorter this week. So I would like to share many new feature implementation with tablesorter plugin. Custom range column sorter comes as first post of the tablesorter series. Tablesorter plugin gives us features to sort the table column in ascending and descending order from column data in varies format like numeric, text , etc. The plugin is well documented to understand the implementation of plugin very clearly. But some case we need to special customization with the help of plugin support. While column having range of price or rang of values like (10k to 15k or 500 to 1K), it will be difficult to sort the values.

Tablesorter jquery plugin custom range sorting

Tablesorter plugin has the addParser method to extend the sorting features. So using addparser method I have created the rangesorting for price range column. To sort the price range like 1k to 5k, we need round number (1500) to sort the values. So we need to find the round number and add that value in row column custom data attribute. I used in below table data-price attribute to hold the round price of column. So using data-price attribute value, we can sort this column as below.

Demo

Example html code for table

<table class="tablesorter">
    <thead>
        <tr>
            <th>Product</th>
            <th>Price</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Wordpress plugin A</td>
            <td data-price="9000">10k to 1k</td>
        </tr>
        <tr>
            <td>Magneto module</td>
            <td data-price="8000">10 to 2k</td>
        </tr>
        <tr>
            <td>Joomla component</td>
            <td data-price="50000">45k to 60k</td>
        </tr>
        <tr>
            <td>open cart extenion</td>
            <td data-price="1000">1K</td>
        </tr>
        <tr>
            <td>wordpress template</td>
            <td data-price="3000">1k to 5k</td>
        </tr>
        <tr>
            <td>Facebook Application developement</td>
            <td data-price="15000">15k</td>
        </tr>
        <tr>
            <td>Twitter page setup</td>
            <td data-price="10000">10k</td>
        </tr>
    </tbody>
</table>

Tablesorter plugin configuration

$(function () {

    $.tablesorter.addParser({
        // set a unique id 
        id: 'rangesort',
        is: function (s) {
            // return false so this parser is not auto detected 
            return false;
        },
        format: function (s, table, cell, cellIndex) {
            // get data attributes from $(cell).attr('data-something');
            // check specific column using cellIndex
            return $(cell).attr('data-price');
        },
        // set type, either numeric or text 
        type: 'numeric'
    });

    $('.tablesorter').tablesorter({ 
        headers: {
        1: {
            sorter: 'rangesort'
        }
        }
    });

});

This is example to do custom sort the column from hidden value of column. So you can do your own stunt using addParser method on jquery tablesorter plugin. Hope this helps to someone. I will come up with other experience with tablesorter plugin as soon as possible.