Jquery UI slider and buttons to customize list or table - What way to go?

Story:

I have a list of products. I want to be able to sort them by price, brand and shop. All the products are in div's. I can put t开发者_StackOverflow社区hem in a table as well if thats better. What I want to achieve is that I can sort this list with Jquery's UI slider and buttons. I want visitors to be able to use the slider to select a certain price range. I want all brands and shops "selected". Visitors can deselect a brand and/or shop. I would like this all to change live on the page.

Question:

Now my question is, what is the best way to get this result? As I am relatively new to Jquery and javascript in general I could use some advice.

The way i was thinking about doing it was giving each product's wrapping div custom attributes like: price="100" brand="samsung" etc. Then Using Jquery to hide/show the div's within a certain criteria?

Is this the right way to achieve this?

Well there a few aspects to this:

1. Using ajax to get the list of products with the criteria specified by the user
2. Sorting this information when columns are clicked on

For 1. this really depends on your application, passing the criteria to i.e. search.php with post values and receiving the new table HTML back. You can use .serialize() to easily pass form values to your PHP backend

For 2. There is the jQGrid plugin for jQuery, which is very popular, although possibly a bit heavyweight with its plethora of features -- http://www.trirand.com/blog/ of course there are many other good options available:

• 12 Useful jQuery Plugins for Working with Tables
• Enhance Tables Using One Of 30 Functional jQuery Plugins

Personally I would convert your information to tables. I know by saying that I'll probably get pulled over by the DIV police, but we're talking about tabulated information i.e. information that belongs in a table. Also most jQuery plugins operate with the sorting of tables in mind.