3テーブル列のトグルソート

Question

私は食べ物とカロリーのテーブルを持っています。 ASCとDESCのカロリー列を並べ替えるためのスニペットが見つかりました。しかし、私がしたいのは、それを3回目のクリックで元のディスプレイに戻すことです。したがって、ページの読み込みでは、テーブルは特定の順序になります。最初のクリックでは、カロリー列の値によって昇順にテーブルがソートされ、2番目のクリックで降順にソートされます。 3回目のクリックで元の注文に戻るにはどうすればいいですか？これは、テーブルのHTML

const sortTable = (f,n) => { 
    var rows = $('.meal-foods-table tbody tr').get(); 
    rows.sort((a, b) => { 

     var A = getVal(a); 
     var B = getVal(b); 
     if(A < B) { 
      return -1*f; 
     } 
     if(A > B) { 
      return 1*f; 
     } 
     return 0; 
    }); 

    function getVal(elm) { 
     var v = $(elm).children('td').eq(2).text().toUpperCase(); 
     if($.isNumeric(v)){ 
      v = parseInt(v,10); 
     } 
     return v; 
    } 

    $.each(rows, (index, row) => { 
     $('.meal-foods-table').children('tbody').append(row); 
    }); 
} 

const sortHeaders =() => { 
    var f_nm = 1; 

    $("#cal").on('click', 'button.sort-cal',() => { 
     f_nm *= -1; 
     var n = $(this).prevAll().length; 
     sortTable(f_nm,n); 
    }); 
} 

です： ここで私が見つけスニペット、SOのおかげでテーブルを動的に移入され

<table class="meal-foods-table"> 
    <thead> 
     <tr> 
     <th class="hidden"></th> 
     <th id='name'>Name</th> 
     <th id='cal' class='cal-header'><button class='sort-cal'>Calories</button></th> 
     </tr> 
    </thead> 
    <tbody class="meal-foods-body"> 
    </tbody> 
    </table> 

が、ここでtはその部分のために、彼のコードです：

助けのための

const prependMealFood = (food) => { 
    $(`<tr id=${food.id}> 
    <td><input id='food-${food.id}' type="checkbox"></td> 
     <td class='food-name' contenteditable='true'>${food.name}</td> 
     <td class='food-calories' contenteditable='true'>${food.calories}</td> 
     </tr>`).prependTo('tbody.meal-foods-body') 
} 

ありがとう：D

Answer 1

あなたは破壊的にソートされています。あなたは、HTMLからリストをつかんで、それをソートし、それをあなたがそれをつかんだ同じ場所に戻して貼り付けています。元のソート順に戻したい場合は、元のリストのコピーを保持する必要があります。

var originalRows = $('.meal-foods-table tbody tr').get(); 
const sortTable = (f,n) => { 
    var rows; 
    if(f == 0) { 
     $.each(originalRows, (index, row) => { 
      $('.meal-foods-table').children('tbody').append(row); 
     }); 
     return; 
    } 
    rows = [].concat(originalRows); 
    rows.sort((a, b) => { 

     var A = getVal(a); 
     var B = getVal(b); 
     if(A < B) { 
      return -1*f; 
     } 
     if(A > B) { 
      return 1*f; 
     } 
     return 0; 
    }); 

    function getVal(elm) { 
     var v = $(elm).children('td').eq(2).text().toUpperCase(); 
     if($.isNumeric(v)){ 
      v = parseInt(v,10); 
     } 
     return v; 
    } 

    $.each(rows, (index, row) => { 
     $('.meal-foods-table').children('tbody').append(row); 
    }); 
} 
const sortHeaders =() => { 
    var f_nm = -1; 

    $("#cal").on('click', 'button.sort-cal',() => { 
     var n = $(this).prevAll().length; 
     switch(f_nm) { 
      case 0: 
      f_nm = -1; 
      break; 
      case -1: 
      f_nm = 1; 
      default: 
      f_nm = 0; 
     } 
     sortTable(f_nm,n); 
    }); 
}