使用 jquery 或 Javascript 自定义表排序答案

【问题标题】：Custom table sort using jquery or Javascript使用 jquery 或 Javascript 自定义表排序
【发布时间】：2015-05-14 11:19:41
【问题描述】：

我有下表，其中包含三列（ID、日期和来源）。我想根据 Source Column 对该表进行排序。 我不想对字母或数字进行排序。我希望它们像 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>

【问题讨论】：

也许你想要这个Jquery UI sortable..
您是否在某种 javascript 数组中保存了该数据，对吗？你是怎么得到那个 HTML 的？
我仅使用 HTML 进行说明。如果我显示这个数据，那么它会像上面那样。
so-on 是什么..看起来像加拿大的省份。 source 值是否已知？
是的，源值是已知的。

标签： javascript jquery html

【解决方案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

【讨论】：

【解决方案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');

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

【讨论】：

【解决方案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中元素的顺序排列。

【讨论】：