使用tablesorter

时间:2018-06-18 09:53:01

标签: javascript jquery html-table tablesorter

使用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”同样只需对第二列进行排序。

我不知道怎么做,你能帮忙吗?

谢谢!

1 个答案:

答案 0 :(得分:1)

我认为这是sort-tbodies widget的好例子(请参阅last example)。

<强> Updated Demo

您需要重新格式化HTML ...使用每个块的colspantable和第一个tr删除 <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>

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

最后,在外表上初始化tablesorter:

widget-sortTbodies

不要忘记包含<script src="../js/widgets/widget-sortTbodies.js"></script> 小部件:

library(forecast)
set.seed(12345)

xa <- sample(c(0,1),length(wineind),replace = T,prob = c(0.2,0.8))
xb <- sample(c(0,1),length(wineind),replace = T,prob = c(0.99,0.01))
t1 <- window(wineind, end = c(1989,12))
xa1 <- xa[1:length(t1)]
xb1 <- xb[1:length(t1)]

m1 <- stlm(t1,method = "arima",
           robust = T,
           xreg = cbind(xa1,xb1),
           lambda = "auto")

t2 <- window(wineind, end = c(1992,12))
xa2 <- xa[1:length(t2)]
xb2 <- xb[1:length(t2)]

m2 <- stlm(t2,model = m1,xreg = cbind(xa2,xb2))