Question

我的下表有三列（ID，Date和Source）。我想根据源列对此表进行排序。 我不想按字母或数字排序。我希望它们排序，就像来自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，但是使用数据属性肯定可以改进它，以提高效率

的 DEMO

Answer 2

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

然后使用js'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');

这会对最后一个table-data元素中不包含标题的所有行进行排序。

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中元素的顺序排序。

使用jquery或Javascript自定义表排序

3 个答案: