使用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%'> - 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%'> - 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%'> - 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%'> - 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%'> - 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%'> - 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”同样只需对第二列进行排序。
我不知道怎么做,你能帮忙吗?
谢谢!
答案 0 :(得分:1)
我认为这是sort-tbodies
widget的好例子(请参阅last example)。
<强> Updated Demo 强>
您需要重新格式化HTML ...使用每个块的colspan
,table
和第一个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))