JQuery list, json array, filter click event

I have a function that filters the items from my list by price when the page loads. I'd like to attach this to a link so instead of having the list sort when the page loads, I'd like to have the user click a link or button to filter the list by price.

Any clue or pointers on how to do this would be great, thanks !

// Json array
var productList = {"products": [
    {"brand": "brand1", "description": "Product 1", "price": "3.25"},
    {"brand": "brand2", "description": "Product 4", "price": "9.97"},
    {"brand": "brand3", "description": "Product 3", "price": "4.21"},
    {"brand": "brand4", "description": "Product 2", "price": "5.24"},
    {"brand": "brand5", "description": "Product 5", "price": "8.52"}
]
};


// SORT BY DESCRIPTION ASCENDING

function loadList() {
    var list = $("#productList").listview();
    var prods = productList.products.sort(function (a, b) {
        return a.description > b.description;
    });
    $.each(prods, function () {
        list.append("<li>" + this.description 开发者_开发百科+ "  :       " + this.price + "</li>");
    });
    $(list).listview("refresh");
}

---

so... you just want to trigger loadList() from a click?

<a href="#" id="sort-list">Sort List</a>

$(function(){
  $("#sort-list").click(loadList);
});

---

Since you are already using jQuery look into tablesorter