Wie sortieren Sie Zeilendetails in HTML?

Question

Ich verwende sorttable, um meine Spalten in Tabelle zu sortieren.

Jetzt habe ich eine Tabelle wie folgt:

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

Haben Sie in der oben erwähnten Tabelle stellte ich fest, Reihe Details für jede Zeile haben? Wenn ich nun auf eine Spaltenüberschrift klicke, um sie zu sortieren, erhalte ich zuerst die Zeilendetails und dann alle Hauptreihen.

Hier ist, wie meine Tabelle sieht vor dem Sortieren:

Hier ist, wie meine Tabelle sieht nach dem Sortieren:

Gibt es eine Lösung für dieses Problem noch sorttable mit ?

Update:

Hier Probe jsFiddle

Row Details jetzt korrekt sortiert werden, wie in der oben jsFiddle gezeigt. Aber jetzt ist das Problem:

Wenn Sie auf City column klicken, sieht alles gut aus. Wenn wir nun wieder auf City Column klicken, werden die Zeilendetails vor den eigentlichen Zeilen angezeigt, was falsch ist.

Bitte schauen Sie auf die Bilder für weitere Informationen über Problem:

Nach einem Klick auf Säule Stadt:

Nach einem Klick auf Säule Stadt (was sieht perfekt) Nochmal: (voraussichtlich ein Entwickler aber unerwartet für einen Benutzer)

Answer 1

Ich rate, aber vielleicht ist das Problem die leere td neben der Zeile Details. Ich habe den Vornamen als Wert hinzugefügt und css style display: none. Jetzt werden die Zeilendetails auch korrekt sortiert.

Aktualisiert Antwort: versucht Nest, nur die Tabelle in der td wie das Beispiel unten.

Versuchen Sie folgendes:

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