Question

我有一个显示名称的表，以及我使用循环计算的每个名称对应的两个值以及每个值的进度条。

代码看起来像这样，

<table>
<thead>
<th>Name</th>
<th>Value1</th>
<th>Value2</th>
</thead>
<tbody>
<% i=0 %>
<% j=0 %>
<% @department.members.each do |members| %>
<td><td><% members.name %><td>
<% members.evals.each do |evals| %>
<% i+=value1 * something %>
<% j+=value2 * something %>
<% end %>
<tr>
<td>
<div class="progress"><div class="bar" style="width: <%= (i*10).round() %>%;"></div></div>
<%= i %>
</td>
<td>
<div class="progress"><div class="bar" style="width: <%= (j*10).round() %>%;"></div></div>
<%= j %>
</td>
<% end %>
</tbody>
</table>

我希望允许用户单击头部并动态对信息进行排序，而无需更改客户端页面，也可以在表格上方创建一个允许用户执行相同操作的下拉菜单。 “按值排序2”和“按值排序1”。

我正在使用bootstrap，所以我不想使用DataTables。甚至他们的bootstrap主题也不像boostrap。我只是想要一个简单的排序，同时保留我当前的样式。

Answer 1

您需要使用JavaScript对表进行排序，使用jQuery查看sortable table。

您始终可以编辑CSS文件以匹配您的布局或与引导程序的布局匹配。

Answer 2

Datatable（http://datatables.net/release-datatables/examples/basic_init/zero_config.html）

使用计算数据在客户端创建可排序表

2 个答案: