使用javascript函数自定义排序HTML表格

Question

我正在关注@charlietfl 在Custom table sort using jquery or Javascript 上给出的答案。

该表似乎没有为我排序。

我的代码：

var custom_sort =['ABC','MNO','XYZ'];

var $rows = $('tr:gt(0)').detach().sort(function(a, b){
  var aSrcIdx =custom_sort.indexOf( $(a).find('td:last').text());
  var bSrcIdx = custom_sort.indexOf( $(b).find('td:last').text());

  return aSrcIdx >  bSrcIdx;

});
    
$('#mytable').append($rows);

table, td, th { border: 1px solid black; }

#mytable { 
    width: 100%;
    border-collapse: collapse; 
}

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

<table id='mytable'>
   <tr>
      <th>ID</th>
      <th>Date</th>
      <th>Source</th>
  </tr>
  <tr>
      <td>50</td>
      <td>2012-01-01</td>
      <td>XYZ</td>
  </tr>
  <tr>
      <td>80</td>
      <td>2011-07-08</td>
      <td>ABC</td>
  </tr>
  <tr>
      <td>94</td>
      <td>2013-06-05</td>
      <td>MNO</td>
  </tr>
  <tr>
      <td>50</td>
      <td>2012-01-01</td>
      <td>MNO</td>
  </tr>
  <tr>
      <td>50</td>
      <td>2012-01-01</td>
      <td>XYZ</td>
  </tr>
  <tr>
      <td>75</td>
      <td>2012-01-01</td>
      <td>ABC</td>
  </tr>
</table>

如您所见，我希望能够按ABC,MNO,XYZ,ABC,MNO,XYZ 的顺序排列

为什么代码不起作用？

我如何自定义排序我的表格看起来像：

ID	Date	Source
80	2011-07-08	ABC
94	2013-06-05	MNO
50	2013-06-05	XYZ
75	2012-01-01	ABC
50	2012-01-01	MNO
50	2012-01-01	XYZ

Answer 1

const customSort = ['ABC','MNO','XYZ'];

const rows = [...$('tr:gt(0)').detach()];
const iMax = rows.length * customSort.length;
const sortedRows = [];
for (let i = 0; i < iMax; i++) {
  const targetValue = customSort[i % customSort.length];
  const targetRowIndex = rows.findIndex(row => {
    return $(row).find('td:last').text() === targetValue;
  });
  if (targetRowIndex !== -1) {
    const targetRow = rows.splice(targetRowIndex, 1)[0];
    sortedRows.push(targetRow);
  }
}
sortedRows.push(...rows);

$('#mytable').append(sortedRows);

table, td, th { border: 1px solid black; }

#mytable { 
    width: 100%;
    border-collapse: collapse; 
}

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

<table id='mytable'>
   <tr>
      <th>ID</th>
      <th>Date</th>
      <th>Source</th>
  </tr>
  <tr>
      <td>50</td>
      <td>2012-01-01</td>
      <td>XYZ</td>
  </tr>
  <tr>
      <td>80</td>
      <td>2011-07-08</td>
      <td>ABC</td>
  </tr>
  <tr>
      <td>94</td>
      <td>2013-06-05</td>
      <td>MNO</td>
  </tr>
  <tr>
      <td>50</td>
      <td>2012-01-01</td>
      <td>MNO</td>
  </tr>
  <tr>
      <td>50</td>
      <td>2012-01-01</td>
      <td>XYZ</td>
  </tr>
  <tr>
      <td>75</td>
      <td>2012-01-01</td>
      <td>ABC</td>
  </tr>
</table>

Answer 2

您只需更改return aSrcIdx - bSrcIdx;。

因为您需要从比较器​​函数返回 -1、0、1，而不是布尔值。

var custom_sort =['ABC','MNO','XYZ'];

var $rows = $('tr:gt(0)').detach().sort(function(a, b){
  var aSrcIdx =custom_sort.indexOf( $(a).find('td:last').text());
  var bSrcIdx = custom_sort.indexOf( $(b).find('td:last').text());

  return aSrcIdx -  bSrcIdx;

});
    
$('#mytable').append($rows);

table, td, th { border: 1px solid black; }

#mytable { 
    width: 100%;
    border-collapse: collapse; 
}

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

<table id='mytable'>
   <tr>
      <th>ID</th>
      <th>Date</th>
      <th>Source</th>
  </tr>
  <tr>
      <td>50</td>
      <td>2012-01-01</td>
      <td>XYZ</td>
  </tr>
  <tr>
      <td>80</td>
      <td>2011-07-08</td>
      <td>ABC</td>
  </tr>
  <tr>
      <td>94</td>
      <td>2013-06-05</td>
      <td>MNO</td>
  </tr>
  <tr>
      <td>50</td>
      <td>2012-01-01</td>
      <td>MNO</td>
  </tr>
  <tr>
      <td>50</td>
      <td>2012-01-01</td>
      <td>XYZ</td>
  </tr>
  <tr>
      <td>75</td>
      <td>2012-01-01</td>
      <td>ABC</td>
  </tr>
</table>