在TH中按类排序表

时间:2015-09-28 12:22:58

标签: javascript css datatables html-table

我有一个包含10列的表,每列都有不同的类,例如最后一列:data-tot

如何按此类按降序对表进行排序?

完整jsFiddle is available here,但HTML的一小部分示例如下(oddeven行继续显示完整数据。

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

2 个答案:

答案 0 :(得分:1)

  

<强>解

使用下面的代码按jQuery选择器.data-tot指定的列按降序排序。

$('#myTable').DataTable().column('.data-tot').order('desc').draw();

有关详细信息,请参阅columns().order()

  

<强>样本

请参阅updated jsFiddle以获取代码和演示。

答案 1 :(得分:0)

从您链接起,您使用DataTables 。你需要简单地给你一个id表。剩下的就是DataTables Here is updated link