名前を表示するテーブルと、ループと各値のプログレスバーを使用して計算した各名前に対応する2つの値があります。
コードは次のようになります。
<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>
ユーザーがヘッドをクリックして、クライアント側のページを変更せずにこの情報を動的に並べ替えることができるようにし、ユーザーが同じことを実行できるようにテーブルの上にドロップダウンメニューを作成できるようにしたいと思います。「value2で並べ替え」と「value1で並べ替え」。
ブートストラップを使用しているので、使用したくありませんDataTables。彼らのブートストラップテーマでさえ、ブーストラップのようには見えません。現在のスタイルを維持しながら、単純な並べ替えが必要です。