Implementing a sortable list

I am using Ruby on Rails 3.0.9, jQuery 1.6.2 and jQuery UI. I have the following HTML list:

<ul>
  <li>
  <div class="left">
    <%= link_to 'NAME', '#' %>
  </div>
  <div class="right">
    <%= link_to 'SURNAME', '#' %>
  </div>
  <div class="middle">
    <%= link_to 'AGE', '#' %>
  </div>
  </li>

  <li>
  <div class="left">
    Test name1 value
  </div>
  <div class="right">
    Test surname1 value
  </div>
  <div class="middle">
    Test age1 value
  </div>
  </li>

  <li>
  <div class="left">
    ...
  </div>
  <div class="right">
    ...
  </div>
  <div class="middle">
    ...
  </div>
  </li>
</ul>

I would like to make that sortable using JavaScript (if possible using jQuery and jQuery UI, not external plugin). That is, by clicking on the NAME, SURNAME or AGE I would like to list items by the "pseudo-column"\"link" clicked.

For instance:

When I click on NAME I would like to have:

 NAME*     SURNAME     AGE
---------------------------
 Name1     Surname1    20
 Name2     Surname2    25
 Name3     Surname3    30
 Name4     Surname4    24
 ...       ...         ...

When I click on AGE I would like to have:

 NAME      SURNAME     AGE*
---------------------------
 Name1     Surname1    20
 Name4     Surname4    24
 Name2     Surname2    25
 Name3     Surname3    30
 ...       ...         ...

How can I do\co开发者_开发百科de that? What do you advice about (maybe I have to use a HTML <table>... instead of <ul><li>...)?

I'd recommend you have a look at Railscast 240: Search, Sort, Paginate with Ajax. Just skip the ajax part if it's unnecessary.

You'll be able to use <ul> tags if you prefer them to the <table> markup because essentially you are just setting an order param when you click the link.

If you used a table you could use one of the many table / sorting plugins like: http://tablesorter.com/docs/

Also i think a table would surely be better suited for that kind of data. (and more semantically correct)

I'd suggest the same thing as Andy: use a js module to do it client side (assuming that the whole set of data is sent to the client at once). I'd recommend data tables.

I once tried to make sorting functionality without a plugin. But when i want to make additional functionality like filter, pagination, etc, I became overwhelmed. So i'd recommend metasearch for sorting and filtering and combine it with kaminari for pagination. For ajax, use Chaker Nakhli suggestion. it's worth trying.