使用jquery或Javascript自定义表排序 [英] Custom table sort using jquery or Javascript

问题描述

我的下表有三列（ID，Date和Source）。我想根据源列对此表进行排序。 我不想按字母或数字排序。我希望它们排序，就像来自ON源的所有行将首先出现在表中，之后是来自MB源的所有行，依此类推 Javascript 或 jquery 。我搜索了几乎所有与排序相关的线程。但我没能解决这个问题。我是新手，请帮助我完成这项工作。非常感谢您的帮助。

 < table> 
< tr> 
< th> ID< / th> 
< th>日期< / th> 
< th>来源< / 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> 
  

解决方案

可以生成订单数组，因为源已知且使用该数组索引进行排序

  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（））; 
 
返回aSrcIdx > bSrcIdx; 
}）; 
 
 $（'table'）。append（$ rows）; 
  

我单独留下了html但是使用数据属性肯定可以改善它，以提高效率

DEMO

I have the following table with three columns (ID, Date, and Source). I want to sort this table based on the Source Column. I don't want to sort either alphabetic or numeric. I want them sorted like all the rows from ON sources will appear first in the table, after then all the rows from MB source, and so on using either Javascript or jquery. I searched almost all the threads related to sorting. But I failed to solve this problem. I am new to this so please help me to get this done. Your help is really appreciated.

<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>

解决方案

Can make array of the order since source is known and use that array index to sort by

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);

I left the html alone but it could certainly be improved with data attributes to make this more efficient

DEMO

这篇关于使用jquery或Javascript自定义表排序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！