jQuery/Javascript - Tabellenspalten basierend auf Summen sortieren Zeile

Question

Wie kann eine Sortierung für Tabellenspalten basierend auf der Sortierung der letzten Summenzeile durchgeführt werden?

Zum Beispiel würde mit der folgenden Tabellenstruktur die Zeile mit dem Titel "Total Sold%" verwendet, um die entsprechenden Spalten im Wert von hoch nach niedrig zu sortieren. Somit würde verschieben sich die Spalten nach links oder rechts, so dass der "Total verkauft%" Zeile sortiert wird 12,42%, 12,64%, 14,73%:

<table class="table table-bordered text-center"> 
    <thead> 
    <tr> 
     <th class="text-center"> 
     Average 
     </th> 
     <th class="text-center"> 
     Entry #1 
     </th> 
     <th class="text-center"> 
     Entry #2 
     </th> 
     <th class="text-center"> 
     Entry #3 
     </th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
     <th scope="row"> 
     New Car Total Leads 
     </th> 
     <td> 
     251 
     </td> 
     <td> 
     227 
     </td> 
     <td> 
     526 
     </td> 
    <tr> 
     <th scope="row"> 
     Appointments Shown % 
     </th> 
     <td> 
     61% 
     </td> 
     <td> 
     61% 
     </td> 
     <td> 
     61% 
     </td> 
    </tr> 
    <tr> 
     <th scope="row"> 
     Sold (Delivered) 
     </th> 
     <td> 
     28 
     </td> 
     <td> 
     37 
     </td> 
     <td> 
     85 
     </td> 
    </tr> 
    <tr> 
     <th scope="row"> 
     Total Sold % 
     </th> 
     <td> 
     12.64% 
     </td> 
     <td> 
     12.42% 
     </td> 
     <td> 
     14.73% 
     </td> 
    </tr> 
    </tbody> 
</table> 

Answer 1

Nun, können Sie auf diese Weise vorgehen:

1. Suchen Sie die Zeile R mit den Daten zum Sortieren und Sortieren der Datenzellen. Speichert diese sortierten Zellen in S
2. Auf jeder Reihe r, sortiert jede Datenzelle c wie in S
   1. Finden den Index c in r. Dies ist i
   2. Finden Sie die Zelle C bei R [i]
   3. die Position C Get in S. Dies ist unser Zielindex im Array, sortiere damit
3. Fügen Sie jede Zelle in der Reihe an. Es werden alle Zellen an der richtigen Position

ersetzen Dieser Code ist gebrochen, siehe unten

$('#sort').click(sort); 
 

 
function sort() { 
 
    var $table = $('table'), 
 
    $sorted = $table.find('tbody tr').last().children().slice(1).sort(function(a, b) { 
 
     return parseFloat(a.textContent) - parseFloat(b.textContent) 
 
    }); 
 
    $table.find('tr').each(function() { 
 
    var $row = $(this); 
 
    $row.children().slice(1).sort(function(a, b) { 
 
     return $sorted.eq($(a).index() - 1).index() - $sorted.eq($(b).index() - 1).index(); 
 
    }).each(function() { 
 
     $row.append(this); 
 
    }); 
 
    }); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="sort"> 
 
    Sort 
 
</button> 
 
<table class="table table-bordered text-center"> 
 
    <thead> 
 
    <tr> 
 
     <th class="text-center"> 
 
     Average 
 
     </th> 
 
     <th class="text-center"> 
 
     Entry #1 
 
     </th> 
 
     <th class="text-center"> 
 
     Entry #2 
 
     </th> 
 
     <th class="text-center"> 
 
     Entry #3 
 
     </th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <th scope="row"> 
 
     New Car Total Leads 
 
     </th> 
 
     <td> 
 
     251 
 
     </td> 
 
     <td> 
 
     227 
 
     </td> 
 
     <td> 
 
     526 
 
     </td> 
 
     <tr> 
 
     <th scope="row"> 
 
      Appointments Shown % 
 
     </th> 
 
     <td> 
 
      61% 
 
     </td> 
 
     <td> 
 
      61% 
 
     </td> 
 
     <td> 
 
      61% 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <th scope="row"> 
 
      Sold (Delivered) 
 
     </th> 
 
     <td> 
 
      28 
 
     </td> 
 
     <td> 
 
      37 
 
     </td> 
 
     <td> 
 
      85 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <th scope="row"> 
 
      Total Sold % 
 
     </th> 
 
     <td> 
 
      12.64% 
 
     </td> 
 
     <td> 
 
      12.42% 
 
     </td> 
 
     <td> 
 
      14.73% 
 
     </td> 
 
     </tr> 
 
    </tbody> 
 
</table>

Natürlich, das ist nur eine von allen möglichen Lösung und nicht der schnellere. Andernfalls könnten Sie versuchen, Ihre Tabelle in einem Array (Zeilen) von Arrays (Zellen) zu analysieren, sortieren und dann die Tabelle erneut einfügen. Es wäre vermeiden so viele jQuery Anrufe zu tun, eher & Speicher verlangsamen

---

bearbeiten raubend: Über Code wird nicht in den meisten Fällen arbeiten, weil ich, dass der sort Algorithmus JavaScript weggelassen wird davon ausgegangen, dass Elemente nur bewegt werden, Nach der Ausführung der inneren Funktion ändert sich der Index also bei jeder Iteration. Mein vorheriger Code hat das nicht gemacht, also funktioniert es nicht.

Hier ist die feste Version

$('#sort').click(sort); 
 

 
function sort() {var LEFT_ROWS = 1, 
 
    $table = $('table'), 
 
    $sorted = $table.find('tbody tr').last().children().slice(LEFT_ROWS); 
 
    $sorted = $sorted.sort(function(a, b) { 
 
    return parseFloat(a.textContent) - parseFloat(b.textContent); 
 
    }); 
 
    $table.find('tr').each(function() { 
 
    var $row = $(this), 
 
     $rowContent = $row.children().slice(LEFT_ROWS); 
 
    $rowContent.toArray().map(function(t) { 
 
     return $sorted.eq($(t).index() - LEFT_ROWS).index() - LEFT_ROWS 
 
    }).sort(function(a, b) { 
 
     var diff = a - b; 
 
    }).forEach(function(i) { 
 
     $row.append($rowContent.eq(i)); 
 
    }); 
 
    }); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="sort"> 
 
    Sort 
 
</button> 
 
<table class="table table-bordered text-center"> 
 
    <thead> 
 
    <tr> 
 
     <th class="text-center"> 
 
     Average 
 
     </th> 
 
     <th class="text-center"> 
 
     Entry #1 
 
     </th> 
 
     <th class="text-center"> 
 
     Entry #2 
 
     </th> 
 
     <th class="text-center"> 
 
     Entry #3 
 
     </th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <th scope="row"> 
 
     New Car Total Leads 
 
     </th> 
 
     <td> 
 
     251 
 
     </td> 
 
     <td> 
 
     227 
 
     </td> 
 
     <td> 
 
     526 
 
     </td> 
 
     <tr> 
 
     <th scope="row"> 
 
      Appointments Shown % 
 
     </th> 
 
     <td> 
 
      61% 
 
     </td> 
 
     <td> 
 
      61% 
 
     </td> 
 
     <td> 
 
      61% 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <th scope="row"> 
 
      Sold (Delivered) 
 
     </th> 
 
     <td> 
 
      28 
 
     </td> 
 
     <td> 
 
      37 
 
     </td> 
 
     <td> 
 
      85 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <th scope="row"> 
 
      Total Sold % 
 
     </th> 
 
     <td> 
 
      12.64% 
 
     </td> 
 
     <td> 
 
      12.42% 
 
     </td> 
 
     <td> 
 
      14.73% 
 
     </td> 
 
     </tr> 
 
    </tbody> 
 
</table>