Question

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\code that? What do you advice about (maybe I have to use a HTML <table>... instead of <ul><li>...)?

Answer 1

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.