Реализация сортируемого списка

Question

Я использую Ruby on Rails 3.0.9, jQuery 1.6.2 и jQuery UI.У меня есть следующий список HTML:

<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>

Я хотел бы сделать это сортируемым, используя JavaScript (если возможно, используя jQuery и jQuery UI, а не внешний плагин).То есть, нажимая на NAME, SURNAME или AGE, я хотел бы перечислить элементы по нажатой ссылке "псевдостолбец" \ ".

Например:

Когда я нажимаю NAME, я хотел бы иметь:

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

Когда я нажимаю AGE, я хотел бы иметь:

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

Какя могу сделать \ код это?Что вы посоветуете по поводу (возможно, мне придется использовать HTML <table>... вместо <ul><li>...) ?

Answer 1

Я бы рекомендовал вам взглянуть на Railscast 240: поиск, сортировка, разбиение на страницы с помощью Ajax . Просто пропустите часть ajax, если она не нужна.

Вы сможете использовать теги <ul>, если предпочитаете их разметке <table>, потому что, по сути, вы просто устанавливаете параметр заказа, когда нажимаете на ссылку.

Answer 2

Я однажды пытался сделать сортировку по функциональности без плагина.Но когда я хочу сделать дополнительные функции, такие как фильтр, нумерация страниц и т. Д., Я был поражен.Поэтому я бы порекомендовал metasearch для сортировки и фильтрации и объединить его с kaminari для нумерации страниц.Для ajax используйте предложение Chaker Nakhli.стоит попробовать.

Answer 3

Я бы предложил то же самое, что и Энди: используйте модуль js, чтобы сделать это на стороне клиента (при условии, что весь набор данных отправляется клиенту одновременно). Я бы порекомендовал таблицы данных .

Answer 4

Если вы используете таблицу, вы можете использовать один из множества плагинов для таблиц / сортировки, например: http://tablesorter.com/docs/

Кроме того, я думаю, что таблица, безусловно, будет лучше подходить для такого рода данных. (и более семантически правильно)