Javascript 对引导表中的可见行和相关隐藏行进行排序

我有一张桌子，是用bootstrap 3做的。 我有两种行，一种有4个td，我使用其中的第一个来显示默认情况下隐藏的下一行。显示有关上一行的数据

所有这些都很好。但是，通过单击标题行的引导排序功能无法按预期工作。它对所有行进行排序，包括隐藏的行，我的系统不再工作。。。当我单击主行时，以下行不是隐藏行…：

有人知道我如何解决这个问题吗

HTML:

<table class="table table-striped">
  <thead>
    <th>show data</th>
    <th>name</th>
    <th>adress</th>
    <th>buttons</th>
  </thead>
  <tbody>
    <tr class="mainRow">
      <td class="clickArrow"></td>
      <td>my name</td>
      <td>my adress</td>
      <td>some buttons</td>
    </tr>
    <tr class="subRow">
      <td colspan=4>THE DATA !!!!</td>
    </tr>
  </tbody>
</table>

JS:

我不知道Bootstrap中的排序函数到底是怎么回事。 也许解决办法是禁用引导排序系统，然后实现我的

---

我只是想知道是否有人已经遇到了这个问题并找到了一个合适的解决方案。

有jquery插件可以解决这个问题

您可以根据表格标题对表格进行排序

试试jquery数据库插件

---

我有一些SCS给你，你可以申请显示排序按钮。然后，您所要做的就是用jquery实现排序机制

table {
    thead,
    tfoot {
      tr {
        th {
          position: relative;
        }
        th.sorting {
          padding-right: 1.5em;
          cursor: pointer;
        }
        th.sorting.asc::before {
          opacity: 1;
        }
        th.sorting.desc::after {
          opacity: 1;
        }
        th.sorting::before,
        th.sorting::after {
          position: absolute;
          bottom: -2px;
          display: block;
          opacity: 0.4;
          padding-bottom: inherit;
          font-size: inherit;
          line-height: 180%;
        }

        th.sorting::before {
          right: 0.75em;
          content: '\2191';
        }
        th.sorting::after {
          right: 0.25em;
          content: '\2193';
        }
      }
    }
  }

---

将.sorting添加到标记以显示排序。和.asc和.desc类来显示排序发生的方向

谢谢，我以前看到过，但我想你不明白我的问题。。。我不是在找一种方法来整理我的桌子。。。我现在正在寻找的是一种从bootstrap.table类禁用SortRapper的方法。。。有什么想法吗？

table {
    thead,
    tfoot {
      tr {
        th {
          position: relative;
        }
        th.sorting {
          padding-right: 1.5em;
          cursor: pointer;
        }
        th.sorting.asc::before {
          opacity: 1;
        }
        th.sorting.desc::after {
          opacity: 1;
        }
        th.sorting::before,
        th.sorting::after {
          position: absolute;
          bottom: -2px;
          display: block;
          opacity: 0.4;
          padding-bottom: inherit;
          font-size: inherit;
          line-height: 180%;
        }

        th.sorting::before {
          right: 0.75em;
          content: '\2191';
        }
        th.sorting::after {
          right: 0.25em;
          content: '\2193';
        }
      }
    }
  }