sort table by price column

It's the billing list:

Service   Price
---------------
S1        13 CHF
S2        Free
S3        Free
S4        40 CHF

I want to sort it by price using jQuery or pure JavaScript. (not server-side)

I tried jQuery Tablesorter, but it failed. Because some prices aren't number. (Free)

What can I do? Can Tablesorter support it? Or I should use other plugins...

You can write your own parser. See the documentation at: http://tablesorter.com/docs/example-parsers.html

Working example:

$.tablesorter.addParser({ 
    id: 'price', 
    is: function(s) { 
        return false; 
    }, 
    format: function(s) { 
        return s.replace(/Free/,0).replace(/ CHF/,""); 
    }, 
    type: 'numeric' 
}); 

$(function() { 
    $("table").tablesorter({ 
        headers: { 
            1: { 
                sorter:'price' 
            } 
        } 
    }); 
});

http://jsfiddle.net/8BCHR/

Here is some custom sort code that will work for you assuming the following:

Your table has the id of items
Each row (tr) you want sorted have the class item
Each price cell (td) has the class price

Then just include the following jQuery code and call the function when you want to sort: (Here is a demo)

var sorted_by_price = false;

function sortByPrice() {
    $('#items').append(
        $('#items').find('tr.item').sort(function (a, b) {
            var td_a = $($(a).find('td.price')[0]);
            var td_b = $($(b).find('td.price')[0]);
            if(sorted_by_price){
                if(td_a.html() == 'Free') return 1;
                return td_b.html().replace(/\D/g, '') - td_a.html().replace(/\D/g, '');
            }else{
                if(td_a.html() == 'Free') return -1;
                return td_a.html().replace(/\D/g, '') - td_b.html().replace(/\D/g, '');
            }
        })
    );
    if(sorted_by_price) sorted_by_price = false;
    else sorted_by_price = true;
}

If you don't want to use heavy plugins, you cant to sort it manually:

$(function(){
    var table=$('#table');
    var rowsArray=$('tr',table).sort(function(current,next){
        var compareCurrent=$('td.price',current).text().toUpperCase();
        var compareNext=$('td.price',next).text().toUpperCase();
        return (compareCurrent<compareNext)? -1 : (compareCurrent > compareNext) ? 1 : 0;
    });
    $('tr',table).remove();
    $.each(rowsArray,function(index,element){
        $(element).appendTo(table)
    })
})

In this example you should add class "price" to cells with prices. Or you can use pseudo-selector ":last-child".

You can use DataTables (http://www.datatables.net/). It's very powerful JS plugin.

Because you have custom, non-numeric values to sort, you will need some sort of custom sort function. Here's such a custom sort routine for your table:

HTML:

<table id="service">
    <tr><td class="sortBy" data-sortType="findNumber">Service</td><td class="sortBy" data-sortType="numeric">Price</td></tr>
    <tr><td>S1</td><td>13 CHF</td></tr>
    <tr><td>S2</td><td>Free</td></tr>
    <tr><td>S3</td><td>Free</td></tr>
    <tr><td>S4</td><td>40 CHF</td></tr>
</table>

Code:

$(".sortBy").click(function() {
    var self = $(this);
    var tbody = self.closest("tbody");

    // determine which column was clicked on
    var column = self.index();

    // get the sort type for this column
    var sortType = self.data("sortType");
    var sortCells = [];

    // get all rows other than the clicked on row
    //    find the right column in that row and
    //    get the sort key from it
    $(this).closest("tr").siblings().each(function() {
        var item = $(this).find("td").eq(column);
        var val = item.text();
        var matches;
        if (sortType == "numeric") {
            if (val.toLowerCase() == "free") {
                val = 0;
            } else {
                val = parseInt(val, 10);
            }
        } else {
            // find numbers in the cell
            matches = val.match(/\d+/);
            if (matches) {
                val = parseInt(matches[0], 10);
            } else {
                val = 0;
            }
        }
        sortCells.push({cell: item, data: val});
    });
    // sort by the key
    sortCells.sort(function(a, b) {
        return(a.data - b.data);
    });
    // reinsert into the table in sorted order
    for (var i = 0; i < sortCells.length; i++) {
        sortCells[i].cell.parent().appendTo(tbody);
    }
});

Working demo: http://jsfiddle.net/jfriend00/3w9gQ/

来源：https://stackoverflow.com/questions/15622874/sort-table-by-price-column

标签

jquery

sorting

tablesorter