【问题标题】:tablesorter with two header rows具有两个标题行的表排序器
【发布时间】:2013-05-25 07:22:38
【问题描述】:

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

这是我的表格标记示例

<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>

【问题讨论】:

    标签: jquery jquery-plugins tablesorter


    【解决方案1】:

    你所要做的就是尝试;)

    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>
    

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

    【讨论】:

    • 谢谢。你还能告诉你什么时候有 sorter-false 仍然 onclick 你看到蓝色边框。有没有办法不在插件中显示它。
    • 嗯,我想你是说焦点轮廓... tabindex 在这些单元格上 initialized: function( table ) { $( table ).find('.sorter-false').removeAttr( 'tabindex' ); } (demo)。
    • jquery.tablesorter.widgets.js 需要什么?即使我将其删除,您的示例仍然有效...
    • @Emaborsa 如果您查看文档的Widgets 部分,您会看到† these widgets are included in the jquery.tablesorter.widgets.js file (except for extra filter formatter functions). 本质上,它是一些常用的小部件:列突出显示、过滤器、可调整大小的列、保存排序、粘性标题、uitheme 和存储小部件。您也可以关注these instructions 自定义文件中包含哪些小部件。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2019-09-04
    • 1970-01-01
    • 2011-03-01
    • 1970-01-01
    • 2018-04-07
    • 2022-01-17
    相关资源
    最近更新 更多