Startseite >JavaScript >JavaScript-Beispiele >Eine Tabelle aus divs mit jQuery nach einer Spalte sortieren

Eine Tabelle aus divs mit jQuery nach einer Spalte sortieren

Wie sortiert man eine Tabelle, die aus div- und span-Tags besteht?

<div class="block_wrapper">
<div class="first_row">
        <span class="form_heading">Name</span>
        <span class="form_heading coupon_heading sort_text">E-Mail ↕</span>
        <span class="form_heading coupon_heading sort_number">Anzahl ↕</span>
      </div>
<div class="list_rows_wrapper">
    <div class="list_row">
        <span class="coupon_item">Vor- und Nachname</span>
        <span class="coupon_item longer_coupon">some_email@example.com</span>
        <span class="coupon_item longer_coupon">1</span>
        <a href="#"><span class="delete_item green">bearbeiten</span></a>
    </div>
    <div class="list_row">
        <span class="coupon_item">AVor- und Nachname</span>
        <span class="coupon_item longer_coupon">2some_email@example.com</span>
        <span class="coupon_item longer_coupon">20</span>
        <a href="#"><span class="delete_item green">bearbeiten</span></a>
    </div>
    <div class="list_row">
        <span class="coupon_item">ZVor- und Nachname</span>
        <span class="coupon_item longer_coupon">28some_email@example.com</span>
        <span class="coupon_item longer_coupon">2</span>
        <a href="#"><span class="delete_item green">bearbeiten</span></a>
    </div>
    .....
</div>
</div>
<script>
  var sort_as_text;
  function char2Diacritic(transDiacritic)
  { // ein Buchstabe mit Akzent wird zum Grundbuchstaben mit | dahinter, so steht er direkt nach dem Grundbuchstaben
    return transDiacritic.toUpperCase().normalize('NFD').replace(/\p{Diacritic}/gu, '|');
  }
  function sortTable(f,n){
      var rows = $('.list_row').get();
      rows.sort(function(a, b) {
          var A = getVal(a);
          if(sort_as_text){ A = char2Diacritic(A); } // Buchstaben mit Akzent (nur Text)
          var B = getVal(b);
          if(sort_as_text){ B = char2Diacritic(B); } // Buchstaben mit Akzent (nur Text)
          if(A < B) {
              return -1*f;
          }
          if(A > B) {
              return 1*f;
          }
          return 0;
      });
      function getVal(elm){
          var v = $(elm).children('.coupon_item').eq(n).text().toUpperCase();
          if(sort_as_text == false){
            v = parseInt(v,10);
          }
          return v;
      }
      $.each(rows, function(index, row) {
          $('.list_rows_wrapper').append(row);
      });
  }
  $( document ).ready(function() {
    var f_sl = 1;
    $(".coupon_heading").click(function(){
        sort_as_text = $(this).hasClass( "sort_text" ); // true = sort_text ; false = sort_number
        f_sl *= -1;
        var n = $(this).prevAll().length;
        sortTable(f_sl,n);
    });
  });
</script>

Tipp: Heute lassen sich Texte auch ohne eigene Umwandlung richtig sortieren – die Methode localeCompare kommt mit Umlauten und anderen Buchstaben mit Akzent zurecht, und mit einem Sprachcode richtet sie sich nach den Regeln dieser Sprache (mit 'de' steht zum Beispiel Ä direkt nach A, mit 'sv' erst nach Z). Die Vergleichsfunktion sähe dann so aus:

rows.sort(function(a, b) {
    var A = getVal(a);
    var B = getVal(b);
    if(sort_as_text){ return A.localeCompare(B, 'de') * f; } // Texte nach den Regeln der Sprache
    if(A < B) { return -1*f; }
    if(A > B) { return 1*f; }
    return 0;
});