Question

我正在尝试使用jQuery tablesorter插件来保持静态的第一列-就像行排名应该始终为表行长度的1一样。关于修复“等级”列的问题还有其他几个问题，应答者为此写了一个小型tablesorter插件来完成此任务。

不过，我还使用了“滚动”小部件，以使前两列与移动设备上的宽表保持可见。在还启动了滚动条的情况下，当我单击表格标题对表格进行排序时，应答者编写的“ indexFirstColumn”小部件在表格顶部写入了空白行。

借用这里写的小部件：

Exclude a column from being sorted using jQuery tablesorter

在这里测试： https://jsbin.com/julavewole/edit?html,js,output

例如：

 <table class="tablesorter">
  <thead>
<tr>
  <th>Rank</th>
  <th>Name</th>
  <th>GP</th>
  <th>AB</th>
  <th>AVG</th>
  <th>2B</th>
  <th>3B</th>
  <th>HR</th>
  <th>RBI</th>
  <th>SLG</th>
  <th>OBP</th>
</tr>
  </thead>
  <tbody>
<tr>
  <td>1</td>
  <td>Bryce Harper</td>
  <td>123</td>
  <td>502</td>
  <td>.343</td>
  <td>23</td>
  <td>7</td>
  <td>41</td>
  <td>123</td>
  <td>.654</td>
  <td>.856</td>      
</tr>
<tr>
  <td>2</td>
  <td>J.D. Martinez</td>
  <td>113</td>
  <td>464</td>
  <td>.313</td>
  <td>45</td>
  <td>2</td>
  <td>46</td>
  <td>145</td>
  <td>.756</td>
  <td>1.012</td>
</tr>
<tr>
  <td>3</td>
  <td>Aaron Judge</td>
  <td>103</td>
  <td>392</td>
  <td>.293</td>
  <td>32</td>
  <td>12</td>
  <td>62</td>
  <td>89</td>
  <td>.453</td>
  <td>.822</td>
</tr>
<tr>
  <td>4</td>
  <td>Mike Trout</td>
  <td>114</td>
  <td>542</td>
  <td>.323</td>
  <td>43</td>
  <td>12</td>
  <td>37</td>
  <td>100</td>
  <td>.554</td>
  <td>.656</td>
</tr>
<tr>
  <td>5</td>
  <td>Mookie Betts</td>
  <td>112</td>
  <td>462</td>
  <td>.353</td>
  <td>37</td>
  <td>15</td>
  <td>29</td>
  <td>134</td>
  <td>.754</td>
  <td>.986</td>
</tr>
<tr>
  <td>6</td>
  <td>Ronald Acuna</td>
  <td>43</td>
  <td>178</td>
  <td>.243</td>
  <td>21</td>
  <td>8</td>
  <td>8</td>
  <td>89</td>
  <td>.454</td>
  <td>.556</td>
</tr>
<tr>
  <td>7</td>
  <td>Jose Altuve</td>
  <td>109</td>
  <td>472</td>
  <td>.303</td>
  <td>41</td>
  <td>2</td>
  <td>11</td>
  <td>67</td>
  <td>.534</td>
  <td>.576</td>
</tr>    
</tbody>
</table>

$（function（）{

  // add new widget called indexFirstColumn
  $.tablesorter.addWidget({
    // give the widget a id
    id: "indexFirstColumn",
    // format is called when the on init and when a sorting has finished
    format: function(table) {               
        // loop all tr elements and set the value for the first column  
        for(var i=0; i < table.tBodies[0].rows.length; i++) {
            $("tbody tr:eq(" + i + ") td:first",table).html(i+1);
        }                                   
    }
  });  
  $('table').tablesorter({
     sortList : [[4,1]],
     theme: 'default',
     widthFixed: false,
     sortInitialOrder: "desc",
     widgets: ['scroller',  'indexFirstColumn'],
     widgetOptions : {      
        scroller_height : 300,      
        scroller_upAfterSort: true,      
        scroller_jumpToHeader: true      
     }
  }); 
  $( 'table' ).trigger( 'setFixedColumnSize', 2 ); 
});

使用tablesorter保持第一列为静态（例如等级），同时也使用“ scroller”小部件

0 个答案: