3切換表列的排序

Question

我有一桌食物和卡路里。 我找到了一些摘要，以便我對卡路里列ASC和DESC進行排序。 但是我想做的就是讓它也回到第三次單擊時的原始顯示。 因此，在頁面加載時，表是按一定順序排列的。 第一次單擊時，它將按卡路里列中的值以升序對表格進行排序，第二次單擊時，將以降序進行排序。 在第三次點擊后，我該如何恢復到原始順序？ 這是我發現的摘錄，這要歸功於SO：

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);
    });
}

這是表格的HTML：

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

該表是動態填充的，這是該部分的代碼：

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);
    });
}