Question

我正在使用sorttable对表格中的列进行排序。

现在我有一张表格如下：

<table class="sortable draggable">
    <thead>
        <tr>
            <th class="col-salesOrderId">Order Number</th>
            <th class="col-orderDate">Date of Order</th>
            <th class="col-party">Party</th>
            <th class="col-edit">Edit</th>
            <th class="col-delete">Delete</th>
        </tr>
    </thead>
    <tbody>
        {#orders}
        <tr>
            <td class="col-salesOrderId">{.salesOrderId}</td>
            <td class="col-orderDate">{@formatDate date=orderDate format="DD-MM-YYYY" /}</td>
            <td class="col-party">{.party.partyName}</td>
            <td class="col-edit">
                <button class="btn btn-info btn-edit">
                    &nbsp;
                </button>
            </td>
            <td class="col-delete">
                <button class="btn btn-danger btn-delete">
                    &nbsp;
                </button>
            </td>
        </tr>
        <tr class="row-details">
          <td>{.salesOrderId}</td>
          <td colspan="4">
            <table class="sortable draggable">
              <thead>
                  <tr>
                      <th class="col-itemName">Item Name</th>
                      <th class="col-quantity">Quantity</th>
                      <th class="col-rate">Rate</th>
                      <th class="col-amount">Amount</th>
                  </tr>
              </thead>
              <tbody>
                  {#items}
                    <tr>
                      <td>{.item.itemName}</td>
                      <td>{.quantity}</td>
                      <td>{.rate}</td>
                      <td>{@math key="{.quantity}" method="multiply" operand="{.rate}"/}</td>
                    </tr>
                  {/items}
              </tbody>
            </table>
          </td>
        </tr>
        {/orders}
    </tbody>
</table>

您是否在上面提到的表中注意到每行的行详细信息？现在，当我单击列标题对其进行排序时，我先得到行详细信息，然后获取所有主要行。

以下是我的表在排序之前的样子：

以下是我的表在排序后的样子：

是否还有使用sorttable解决此问题的方法？

更新

以下是示例jsFiddle

行详细信息现在正确排序，如上面的jsFiddle所示。但现在的问题是：

当您点击City column时，一切看起来都很好。现在，如果我们再次单击City Column，行详细信息将显示在错误的实际行之前。

请查看下面的图片，了解有关问题的更多信息：

点击城市列后:(看起来很完美）

再次点击城市列后:(预计开发人员，但用户意外）

Answer 1

~~我猜，但问题可能是行详细信息旁边的空td。我添加了名字作为值并设置了css样式 display：none 。现在，行详细信息也将正确排序。~~

更新回答： 尝试将表嵌套在td中，如下例所示。

试试这个：

                <table class="sortable">
        <thead>
          <tr>
            <th>First Name</th>
            <th>LastName</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Vishal</td>
            <td> Sherathiya
              <table>
                <thead>
                  <tr>
                    <th>Degree</th>
                    <th>Percentage</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td>B.E.</td>
                    <td>67</td>
                  </tr>
                </tbody>
              </table>
              <td>
          </tr>

          <tr>
            <td>Nikunj</td>
            <td>Ramani
              <table>
                <thead>
                  <tr>
                    <th>Degree</th>
                    <th>Percentage</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td>B.E.</td>
                    <td>80</td>
                  </tr>
                  <tr>
                    <td>M.E.</td>
                    <td>54</td>
                  </tr>
                </tbody>
              </table>
            </td>
          </tr>

          <tr>
            <td>Raj</td>
            <td>Gosai</td>
          </tr>
        </tbody>
      </table>

如何对HTML中的行详细信息进行排序？

1 个答案: