具有两个标题行的tablesorter

Dev*_*man 9 jquery tablesorter jquery-plugins

我正在使用tablesorter jquery插件,我的表在标题中有两行.有没有办法在我的桌子上启用排序?它应该能够被第二个标题行排序,第一个标题行就是按日期对相关数据进行分组.如果使用此插件无法做到这一点,那么有人可能会建议解决方法吗?

这是我的表格标记的一个例子

<table>
  <thead>
    <tr>
      <th colspan="3">January</th>
      <th colspan="3">February</th>
      <th colspan="3">March</th>
    </tr>
    <tr>
      <!-- January -->
      <th>Metric 1</th>
      <th>Metric 2</th>
      <th>Metric 3</th>
      <!-- February -->
      <th>Metric 1</th>
      <th>Metric 2</th>
      <th>Metric 3</th>
      <!-- March -->
      <th>Metric 1</th>
      <th>Metric 2</th>
      <th>Metric 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <!-- January -->
      <td>Value 1</td>
      <td>Value 2</td>
      <td>Value 3</td>
      <!-- February -->
      <td>Value 1</td>
      <td>Value 2</td>
      <td>Value 3</td>
      <!-- March -->
      <td>Value 1</td>
      <td>Value 2</td>
      <td>Value 3</td>
    </tr>
    <tr>...</tr>
    <tr>...</tr>
    <!-- etc -->
  </tbody>
<table>
Run Code Online (Sandbox Code Playgroud)

Mot*_*tie 16

你所要做的就是尝试;)

http://jsfiddle.net/Mottie/4mVfu/402/

如果要禁用顶行,则sorter-false向这些标题单元格添加一个类:

<tr>
  <th class="sorter-false" colspan="3">January</th>
  <th class="sorter-false" colspan="3">February</th>
  <th class="sorter-false" colspan="3">March</th>
</tr>
Run Code Online (Sandbox Code Playgroud)

http://jsfiddle.net/Mottie/4mVfu/403/

  • 嗯,我认为你的意思是焦点轮廓...如果是这种情况,我会在下次更新中修复它,同时使用“initialized”回调删除那些“initialized”单元格上的“tabindex” : function( table ) { $( table ).find('.sorter-false').removeAttr( 'tabindex' ); }` ([演示](http://jsfiddle.net/Mottie/4mVfu/5284/))。 (2认同)
  • @Emaborsa如果你查看文档的[Widgets](https://mottie.github.io/tablesorter/docs/#extras)部分,你会看到``†这些小部件包含在jquery.tablesorter.widgets中.js 文件(额外的过滤格式化程序功能除外)。` 本质上,它是一些常用的小部件:列突出显示、过滤器、可调整大小的列、保存排序、粘性标题、uitheme 和存储小部件。您还可以按照[这些说明](https://github.com/Mottie/tablesorter/wiki/Customize) 自定义文件中包含的小部件。 (2认同)