JQuery tablesorter,在<table> </table>(嵌套表)

时间:2015-07-21 14:45:31

标签: javascript html-table nested tablesorter

我有一个表填充了数据库中的数据。由于jQuery tablesorter,这个表是可排序的。我的问题是主表的一个单元格包含另外两个表。所以主表上的排序不再起作用了。如何仅在主表上强制排序?

这是从我的数据库中恢复另一个表后的表格源代码示例:

<table id='users' class='tablesorter' width='100%' border='0'>
  <thead> ... </thead>
  <tbody>
    <tr class="even">
      <td> ... </td>
      <td> ... </td>
      <td>
        <table border="0" cellpadding="0" cellsapcing="0" width="907"
          <tbody>
            <tr class="even"> ... </tr>
            <tr class="even"> ... </tr>
            <tr class="even"> ... </tr>
          </tbody>
        </table>
        <table border="0" cellpadding="0" cellsapcing="0" width="907"
          <tbody>
            <tr class="even"> ... </tr>
            <tr class="even"> ... </tr>
            <tr class="even"> ... </tr>
          </tbody>
        </table>
      </td>
       ...
    </tr>
  </tbody>
</table>

我的javascript:

$("#users").tablesorter({
    headers: {
        0: {
            sorter: false
        },
        4: {
            sorter: false
        },
        5: {
            sorter: false
        },
        6: {
            sorter: false
        },
        7: {
            sorter: false
        },
        9: {
            sorter: false
        },
        10: {
            sorter: false
        },
        11: {
            sorter: false
        },
        12: {
            sorter: false
        },
        13: {
            sorter: false
        },
        14: {
            sorter: false
        },
        15: {
            sorter: false
        }
    }
}).bind("sortEnd",function() {
$(this).find('tbody tr:odd').removeClass('odd even').addClass('odd');
$(this).find('tbody tr:even').removeClass('odd even').addClass('even');
}).trigger("sortEnd");

我的css:

.tablesorter tbody tr:nth-child(odd) {
background-color: white;
}
.tablesorter tbody tr:nth-child(even) {
background-color: lightgrey;
}

1 个答案:

答案 0 :(得分:1)

这听起来像tablesorter的原始版本存在的问题。嵌套表未正确隔离(demo)。

查看我的fork of tablesorter,它确实特别关注嵌套表格。这是a demo

$(function () {
    $('#main').tablesorter({
        theme: 'blue',
        widgets: ['zebra']
    });
});