在TH中按类排序表 [英] Sort table by class in TH
问题描述
我有一个包含10列的表,每个列都有不同的类,例如最后一个有: data-tot
如何按此类排序表格,并按降序排列?
完整 jsFiddle在这里,但是一个小样本的HTML看起来像这样( odd
和 even
sp-data-table sp-sortable-table sp-scrollable-table sp-paginated-table dataTable no-footerdata-sp-rows =30id =DataTables_Table_9role =grid>
< thead>
< tr role =row>
< th class =data-rank sortedtabindex =0aria-controls =DataTables_Table_9rowspan =1colspan =1aria-label =Pos> Pos< / th ;
< th class =data-name sortingtabindex =0aria-controls =DataTables_Table_9rowspan =1colspan =1aria-label =Squadra> Squadra< / th ;
< th class =data-gia sortingtabindex =0aria-controls =DataTables_Table_9rowspan =1colspan =1aria-label =GIA> GIA< / th ;
< th class =data-ros sortingtabindex =0aria-controls =DataTables_Table_9rowspan =1colspan =1aria-label =ROS> ROS< / th> ;
< th class =data-gio sortingtabindex =0aria-controls =DataTables_Table_9rowspan =1colspan =1aria-label =6GIO> 6GIO< / th ;
< th class =data-giotwo sortingtabindex =0aria-controls =DataTables_Table_9rowspan =1colspan =1aria-label =5GIO> 5GIO< / th ;
< th class =data-giothree sortingtabindex =0aria-controls =DataTables_Table_9rowspan =1colspan =1aria-label =4GIO> 4GIO< / th ;
< th class =data-giofour sortingtabindex =0aria-controls =DataTables_Table_9rowspan =1colspan =1aria-label =3GIO> 3GIO< / th ;
< th class =data-tav sortingtabindex =0aria-controls =DataTables_Table_9rowspan =1colspan =1aria-label =TAV> TAV< / th ;
< th class =data-tot sortingtabindex =0aria-controls =DataTables_Table_9rowspan =1colspan =1aria-label =TOT> TOT< / th ;
< / tr>
< / thead>
< tbody>
< tr class =oddrole =row>
< td class =data-rank> 1< / td>
< td class =data-name>< a href =http://www.quartuleague.com/squadra/consulenza-impresa/> CONSULENZA IMPRESA< / a> td>
< td class =data-gia> 0.5< / td>
< td class =data-ros> 0< / td>
< td class =data-gio> 0.5< / td>
< td class =data-giotwo> 1< / td>
< td class =data-giothree> 0< / td>
< td class =data-giofour> 0< / td>
< td class =data-tav> 0< / td>
< td class =data-tot> 2.0< / td>
< / tr>
< tr class =evenrole =row>
< td class =data-rank> 2< / td>
< td class =data-name>< a href =http://www.quartuleague.com/squadra/new-team/>新团队< / a> td>
< td class =data-gia> 0.5< / td>
< td class =data-ros> 2< / td>
< td class =data-gio> 1.0< / td>
< td class =data-giotwo> 1< / td>
< td class =data-giothree> 0< / td>
< td class =data-giofour> 0< / td>
< td class =data-tav> 0< / td>
< td class =data-tot> 4.5< / td>
< / tr>
< / tbody>
< / table>
解决方案
使用下面的代码对jQuery选择器指定的列进行排序 .data-tot
查看 columns()。order()
了解详情。
DEMO
请参阅更新jsFiddle 代码和演示。
I have a table with 10 columns, every column has a different class, for example the last has: data-tot
How to sort the table by this class and in descending order?
A full jsFiddle is available here, but a small sample of the HTML looks like this (the odd
and even
rows continue for the full data).
<table class="sp-league-table sp-data-table sp-sortable-table sp-scrollable-table sp-paginated-table dataTable no-footer" data-sp-rows="30" id="DataTables_Table_9" role="grid">
<thead>
<tr role="row">
<th class="data-rank sorting" tabindex="0" aria-controls="DataTables_Table_9" rowspan="1" colspan="1" aria-label="Pos">Pos</th>
<th class="data-name sorting" tabindex="0" aria-controls="DataTables_Table_9" rowspan="1" colspan="1" aria-label="Squadra">Squadra</th>
<th class="data-gia sorting" tabindex="0" aria-controls="DataTables_Table_9" rowspan="1" colspan="1" aria-label="GIA">GIA</th>
<th class="data-ros sorting" tabindex="0" aria-controls="DataTables_Table_9" rowspan="1" colspan="1" aria-label="ROS">ROS</th>
<th class="data-gio sorting" tabindex="0" aria-controls="DataTables_Table_9" rowspan="1" colspan="1" aria-label="6GIO">6GIO</th>
<th class="data-giotwo sorting" tabindex="0" aria-controls="DataTables_Table_9" rowspan="1" colspan="1" aria-label="5GIO">5GIO</th>
<th class="data-giothree sorting" tabindex="0" aria-controls="DataTables_Table_9" rowspan="1" colspan="1" aria-label="4GIO">4GIO</th>
<th class="data-giofour sorting" tabindex="0" aria-controls="DataTables_Table_9" rowspan="1" colspan="1" aria-label="3GIO">3GIO</th>
<th class="data-tav sorting" tabindex="0" aria-controls="DataTables_Table_9" rowspan="1" colspan="1" aria-label="TAV">TAV</th>
<th class="data-tot sorting" tabindex="0" aria-controls="DataTables_Table_9" rowspan="1" colspan="1" aria-label="TOT">TOT</th>
</tr>
</thead>
<tbody>
<tr class="odd" role="row">
<td class="data-rank">1</td>
<td class="data-name"><a href="http://www.quartuleague.com/squadra/consulenza-impresa/">CONSULENZA IMPRESA</a></td>
<td class="data-gia">0.5</td>
<td class="data-ros">0</td>
<td class="data-gio">0.5</td>
<td class="data-giotwo">1</td>
<td class="data-giothree">0</td>
<td class="data-giofour">0</td>
<td class="data-tav">0</td>
<td class="data-tot">2.0</td>
</tr>
<tr class="even" role="row">
<td class="data-rank">2</td>
<td class="data-name"><a href="http://www.quartuleague.com/squadra/new-team/">NEW TEAM</a></td>
<td class="data-gia">0.5</td>
<td class="data-ros">2</td>
<td class="data-gio">1.0</td>
<td class="data-giotwo">1</td>
<td class="data-giothree">0</td>
<td class="data-giofour">0</td>
<td class="data-tav">0</td>
<td class="data-tot">4.5</td>
</tr>
</tbody>
</table>
SOLUTION
Use the code below to sort table by column specified by jQuery selector .data-tot
in descending order.
$('#myTable').DataTable().column('.data-tot').order('desc').draw();
See columns().order()
for more details.
DEMO
See updated jsFiddle for code and demonstration.
这篇关于在TH中按类排序表的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!