按两个变量对表行进行排序

Question

我正在尝试使用 javascript/jQuery 对表进行动态排序。表行有 2 个属性：

1. 截止日期（unix 时间戳）
2. 状态（1 或 2）

   该表需要按状态排序（状态 1 在顶部，状态 2 在底部），然后按截止日期（升序）排序。

   例如，行示例的正确顺序是：

   <table id="todo_table">
     <tbody>
       <tr deadline="1633333333" status="1"></tr> 
       <tr deadline="1644444444" status="1"></tr>
       <tr deadline="1611111111" status="2"></tr>
       <tr deadline="1622222222" status="2"></tr>
     </tbody>
   </table>
   

   但是，由于通过 javascript（或通过更改截止日期或状态）动态添加和删除行，我希望有一个函数可以在所有这些操作之后对表进行重新排序。

   我能够编写（而不是：在互联网上找到）一段代码，根据 1 个属性对表进行排序：

   var $table= $('#todo_table');
   var rows = $table.find('tr').get();
   rows.sort(function(a, b) {
     var keyA = $(a).attr('deadline');
     var keyB = $(b).attr('deadline');
     if (keyA < keyB) return -1;
     if (keyA > keyB) return 1;
     return 0;
   });
   $.each(rows, function(index, row) {
     console.log(row);
     $table.children('tbody').append(row);
   });
   

   但是，我不知道如何同时按第二个属性排序（同时保留对另一个属性的排序）。

   这是我的 SN-P：

   function sort_table(){
   
     var $table= $('#todo_table');
     var rows = $table.find('tr').get();
     rows.sort(function(a, b) {
       var keyA = $(a).attr('deadline');
       var keyB = $(b).attr('deadline');
       if (keyA < keyB) return -1;
       if (keyA > keyB) return 1;
       return 0;
     });
     $.each(rows, function(index, row) {
       $table.children('tbody').append(row);
     });
       
   }

   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
   
   <table id="todo_table">
     <tbody>
       <tr deadline="1622222222" status="2"><td>Todo 4</td></tr>
       <tr deadline="1611111111" status="2"><td>Todo 3</td></tr>
       <tr deadline="1644444444" status="1"><td>Todo 2</td></tr>
       <tr deadline="1633333333" status="1"><td>Todo 1</td></tr>   
     </tbody>
   </table>
   
   <button onclick="sort_table()">SORT</button>

   最终结果应该是这个 sn-p 中的行排序为 Todo 1 - Todo 2 - Todo 3 - Todo 4，但是现在，因为它只在“截止日期”排序，所以顺序是 3 - 4 - 1 - 2 .

   任何帮助将不胜感激 ：-）

Answer 1

您可以通过链接排序条件来按多个属性排序。在这种情况下，您希望先按状态排序，然后再按截止日期排序。

function sort_table(){
  var $table= $('#todo_table');
  var rows = $table.find('tr').get();
  rows.sort(function(a, b) {
var keyA = $(a).attr('status');
var keyB = $(b).attr('status');
if (keyA < keyB) return -1;
if (keyA > keyB) return 1;
var keyA = $(a).attr('deadline');
var keyB = $(b).attr('deadline');
if (keyA < keyB) return -1;
if (keyA > keyB) return 1;
return 0;
  });
  $.each(rows, function(index, row) {
$table.children('tbody').append(row);
  });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table id="todo_table">
  <tbody>
    <tr deadline="1622222222" status="2"><td>Todo 4</td></tr>
    <tr deadline="1611111111" status="2"><td>Todo 3</td></tr>
    <tr deadline="1644444444" status="1"><td>Todo 2</td></tr>
    <tr deadline="1633333333" status="1"><td>Todo 1</td></tr>   
  </tbody>
</table>

<button onclick="sort_table()">SORT</button>