JQuery tableorter， <在& lt; table>(嵌套表)

JQuery tablesorter, <table> in <table> (nested tables)

本文关键字：嵌套 table tableorter JQuery lt      更新时间：2023-09-26

我有一个表，其中填充了来自数据库的数据。这个表是可排序的，这要归功于jQuery表排序器。我的问题是，主表的一个单元格包含另外两个表。所以主表上的排序不再有效了。如何强制只在主表上进行排序?

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

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

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

查看我的fork的tablesorter，它特别关注嵌套表。这是一个演示。

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