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: Search, Sort, Paginate with Ajax。如果没有必要，请跳过ajax部分。

如果您更喜欢<ul>标记，则可以使用<table>标记，因为基本上您只需在单击链接时设置订单参数。

Answer 2

如果您使用了表格，可以使用许多表格/排序插件中的一个，例如：http://tablesorter.com/docs/

另外我认为表格肯定会更适合这种数据。（在语义上更正确）

Answer 3

我建议和Andy一样：使用js模块做客户端（假设整个数据集一次发送到客户端）。我建议data tables。

Answer 4

我曾尝试在没有插件的情况下进行排序功能。但是，当我想制作过滤器，分页等其他功能时，我变得不知所措。因此，我建议metasearch进行排序和过滤，并将其与kaminari组合以进行分页。对于ajax，请使用Chaker Nakhli的建议。值得一试。

实现可排序列表

4 个答案: