使用 tablesorter 对 TR 块进行排序

Question

使用 TableSorter 插件，我需要对多个 TR 进行排序，这些 TR 是由多个 TR（未定义的子 TR 数量）组成的块（jsfiddle 中的示例）

<tbody id='ligne-pilote'>
    <tr data-id='4578575' class='lineX'>
        <td colspan='10' class='group-tr'>
            <table class='line'>
                <tr height='26'>
                    <td class='b-right' width='33%'>Arbre</td>
                    <td class='b-right' width='6%' align='center'><span>250</span></td>
                    <td class='b-right' width='6%' align='center'><span>360</span></td>
                    <td class='b-right' width='8%' align='center'>5</td>
                    <td class='b-right' width='8%' align='center'>35</td>
                    <td class='b-right' width='8%' align='center'>72</td>
                    <td class='b-right' width='8%' align='center'>1200</td>
                    <td class='b-right' width='6%' align='center'>3850</td>
                    <td class='b-right' width='15%' align='center'>2055</td>
                    <td class='' width='2%' align='center'>ok</td>
                </tr>
                <tr height='26' class='test'>
                    <td class='b-right b-top' width='33%'>&nbsp;&nbsp;&nbsp;&nbsp;- Pin blanc</td>
                    <td class='b-right b-top' width='6%' align='center'><span>Sub-Data-col 2</span></td>
                    <td class='b-right b-top' width='6%' align='center'><span>Sub-Data-col 3</span></td>
                    <td class='b-right b-top' width='8%' align='center'>Sub-Data-col 4</td>
                    <td class='b-right b-top' width='8%' align='center'>Sub-Data-col 5</td>
                    <td class='b-right b-top' width='8%' align='center'>Sub-Data-col 6</td>
                    <td class='b-right b-top' width='8%' align='center'>Sub-Data-col 7</td>
                    <td class='b-right b-top' width='6%' align='center'>Sub-Data-col 8</td>
                    <td class='b-right b-top' width='15%'align='center'>Sub-Data-col 9</td>
                    <td class='b-top' width='2%' align='center'>ok</td>
                </tr>
                <tr height='26' class='test'>
                    <td class='b-right b-top' width='33%'>&nbsp;&nbsp;&nbsp;&nbsp;- Saules</td>
                    <td class='b-right b-top' width='6%' align='center'><span>Sub-Data-col 2</span></td>
                    <td class='b-right b-top' width='6%' align='center'><span>Sub-Data-col 3</span></td>
                    <td class='b-right b-top' width='8%' align='center'>Sub-Data-col 4</td>
                    <td class='b-right b-top' width='8%' align='center'>Sub-Data-col 5</td>
                    <td class='b-right b-top' width='8%' align='center'>Sub-Data-col 6</td>
                    <td class='b-right b-top' width='8%' align='center'>Sub-Data-col 7</td>
                    <td class='b-right b-top' width='6%' align='center'>Sub-Data-col 8</td>
                    <td class='b-right b-top' width='15%'align='center'>Sub-Data-col 9</td>
                    <td class='b-top' width='2%' align='center'>ok</td>
                </tr>
            </table>
        </td>
    </tr>
    <tr data-id='45784515' class='lineX'>
        <td colspan='10' class='group-tr'>
            <table class='line'>
                <tr height='26' >
                    <td class='b-right' width='33%'>Bateau</td>
                    <td class='b-right' width='6%' align='center'><span>3520</span></td>
                    <td class='b-right' width='6%' align='center'><span>6230</span></td>
                    <td class='b-right' width='8%' align='center'>321</td>
                    <td class='b-right' width='8%' align='center'>322</td>
                    <td class='b-right' width='8%' align='center'>323</td>
                    <td class='b-right' width='8%' align='center'>500</td>
                    <td class='b-right' width='6%' align='center'>780</td>
                    <td class='b-right' width='15%' align='center'>6542</td>
                    <td width='2%' align='center'>ok</td>
                </tr>
                <tr height='26' class='test'>
                    <td class='b-right b-top' width='33%'>&nbsp;&nbsp;&nbsp;&nbsp;- Royal Fortune</td>
                    <td class='b-right b-top' width='6%' align='center'><span>Sub-Data-col2 2</span></td>
                    <td class='b-right b-top' width='6%' align='center'><span>Sub-Data-col2 3</span></td>
                    <td class='b-right b-top' width='8%' align='center'>Sub-Data-col2 4</td>
                    <td class='b-right b-top' width='8%' align='center'>Sub-Data-col2 5</td>
                    <td class='b-right b-top' width='8%' align='center'>Sub-Data-col2 6</td>
                    <td class='b-right b-top' width='8%' align='center'>Sub-Data-col2 7</td>
                    <td class='b-right b-top' width='6%' align='center'>Sub-Data-col2 8</td>
                    <td class='b-right b-top' width='15%' align='center'>Sub-Data-col2 9</td>
                    <td class='b-top' width='2%' align='center'>ok</td>
                </tr>
                <tr height='26' class='test'>
                    <td class='b-right b-top' width='33%'>&nbsp;&nbsp;&nbsp;&nbsp;- Royal James</td>
                    <td class='b-right b-top' width='6%' align='center'><span>Sub-Data-col3 2</span></td>
                    <td class='b-right b-top' width='6%' align='center'><span>Sub-Data-col3 3</span></td>
                    <td class='b-right b-top' width='8%' align='center'>Sub-Data-col3 4</td>
                    <td class='b-right b-top' width='8%' align='center'>Sub-Data-col3 5</td>
                    <td class='b-right b-top' width='8%' align='center'>Sub-Data-col3 6</td>
                    <td class='b-right b-top' width='8%' align='center'>Sub-Data-col3 7</td>
                    <td class='b-right b-top' width='6%' align='center'>Sub-Data-col3 8</td>
                    <td class='b-right b-top' width='15%' align='center'>Sub-Data-col3 9</td>
                    <td class='b-top' width='2%' align='center'>ok</td>
                </tr>
                <tr height='26' class='test'>
                    <td class='b-right b-top' width='33%'>&nbsp;&nbsp;&nbsp;&nbsp;- The Ranger</td>
                    <td class='b-right b-top' width='6%' align='center'><span>Sub-Data-col3 2</span></td>
                    <td class='b-right b-top' width='6%' align='center'><span>Sub-Data-col3 3</span></td>
                    <td class='b-right b-top' width='8%' align='center'>Sub-Data-col3 4</td>
                    <td class='b-right b-top' width='8%' align='center'>Sub-Data-col3 5</td>
                    <td class='b-right b-top' width='8%' align='center'>Sub-Data-col3 6</td>
                    <td class='b-right b-top' width='8%' align='center'>Sub-Data-col3 7</td>
                    <td class='b-right b-top' width='6%' align='center'>Sub-Data-col3 8</td>
                    <td class='b-right b-top' width='15%' align='center'>Sub-Data-col3 9</td>
                    <td class='b-top' width='2%' align='center'>ok</td>
                </tr>
                <tr height='26' class='test'>
                    <td class='b-right b-top' width='33%'>&nbsp;&nbsp;&nbsp;&nbsp;- Queen Anne's Revenge</td>
                    <td class='b-right b-top' width='6%' align='center'><span>Sub-Data-col3 2</span></td>
                    <td class='b-right b-top' width='6%' align='center'><span>Sub-Data-col3 3</span></td>
                    <td class='b-right b-top' width='8%' align='center'>Sub-Data-col3 4</td>
                    <td class='b-right b-top' width='8%' align='center'>Sub-Data-col3 5</td>
                    <td class='b-right b-top' width='8%' align='center'>Sub-Data-col3 6</td>
                    <td class='b-right b-top' width='8%' align='center'>Sub-Data-col3 7</td>
                    <td class='b-right b-top' width='6%' align='center'>Sub-Data-col3 8</td>
                    <td class='b-right b-top' width='15%' align='center'>Sub-Data-col3 9</td>
                    <td class='b-top' width='2%' align='center'>ok</td>
                </tr>
            </table>
        </td>
    </tr>

https://jsfiddle.net/gratien/mn3gpu2h/10/

当我点击 "Col1" 时，我只需要对该列每个块的第一行进行排序，与 "Col 2" 相同，后者必须只对第二列进行排序。

我不知道怎么做，你能帮忙吗？

谢谢！

Answer 1

我认为这是 sort-tbodies widget (see the last example) 的一个很好的例子。

Updated Demo

您需要重新格式化 HTML...删除带有 colspan、table 和每个块的第一个 tr 的 td :

  <td colspan='10' class='group-tr'>
    <table class='line'>
      <tr height='26' >

和相关的结束标签

      </tr>
    </table>
  </td>

然后将每个块包裹在 <tbody>...</tbody>:

<tbody>
  <tr class="lineX">...</tr>
  <tr>...</tr>
  <tr>...</tr>
</tbody>

最后，在外部 table 上初始化 tablesorter:

$("#sort").tablesorter({ 
  sortList: [0,0],
  sortMultiSortKey: 'altKey',
  widgets: ['sortTbody'],
  widgetOptions: {
    sortTbody_lockHead: true,
    sortTbody_primaryRow: '.lineX',
    sortTbody_sortRows: true
  }
});

不要忘记包含 widget-sortTbodies 小部件：

<script src="../js/widgets/widget-sortTbodies.js"></script>

使用 tablesorter 对 TR 块进行排序

Sort blocks of TR with tablesorter

javascript

jquery

html-table

tablesorter