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

3切换表格列

1 个答案: