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