使用jQuery或Javascript进行自定义表排序

Question

我的下表有三列（ID，日期和源）。 我想根据“ 源列”对该表进行排序。 我不想按字母或数字排序。 我希望它们的排序方式像ON源中的所有行都将首先出现在表中，然后MB源中的所有行都将出现在表中，依此类推，使用Javascript或jquery 。 我搜索了几乎所有与排序相关的线程。 但是我没有解决这个问题。 我对此并不陌生，所以请帮助我完成这项工作。 非常感谢您的帮助。

<table>
 <tr>
    <th>ID</th>
    <th>Date</th>
    <th>Source</th>
  </tr>
  <tr>
    <td>50</td>
    <td>2012-01-01</td>
    <td>ON</td>
  </tr>
  <tr>
    <td>94</td>
    <td>2013-06-05</td>
    <td>MB</td>
  </tr>
  <tr>
    <td>80</td>
    <td>2011-07-08</td>
    <td>AB</td>
  </tr>
  <tr>
    <td>50</td>
    <td>2012-01-01</td>
    <td>ON</td>
  </tr>
  <tr>
    <td>50</td>
    <td>2012-01-01</td>
    <td>MB</td>
  </tr>
</table>

Answer 1

由于来源已知，可以制作顺序数组，并使用该数组索引进行排序

var sorters =['ON','AB','MB']

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

    return aSrcIdx >  bSrcIdx;    
});

$('table').append($rows);

我独自留下了html，但是可以肯定地通过数据属性对其进行改进，以使其更加高效

演示

Answer 2

好的，这就是我做这样的事情的方式。 给定元素一个data- *属性，其优先级为整数。

然后使用js的sort()函数对它们进行sort()如下所示：

$(elementsToBeSorted).sort(function(a, b){
    return $(a).attr('data-priority') - $(b).attr('data-priority');
}).appendTo('body');

在您的情况下，您可以执行以下操作：

$('tr').not($('.th').parents('tr')).sort(function(a, b){
    return $(a).children('td').last().text() - $(b).children('td').last().text();
}).appendTo('table');

这将按最后一个表数据元素中的文本对不包含标题的所有行进行排序。

Answer 3

我建议先将源数据排序后再放入DOM。 假设data是要显示的数组，则可以编写如下内容：

var data = [
    {id: 50, date: '2012-01-01', source: 'ON'},
    {id: 94, date: '2013-06-05', source: 'MB'}
];

var sortedData = data.sort(function (a, b) {
    var weights = ['ON','MB'];

    return weights.indexOf(a.source) - weights.indexOf(b.source);
});

这样，数组sortedData将根据weights中元素的顺序进行排序。