Question

我有一个表格，我的标题位于第一列。我搜索一个方法来按此列对我的表进行排序。我知道datatable和tablesorter，但我没有找到任何解决方案来对我的表进行排序。

要清楚，这是我的表的一个例子：

Name | John | Jane | Toto
Value| 1256 |  125 | 8563
Val2 |   12 |   45 |    3

（这里是JSFiddle代码的开头：https://jsfiddle.net/nLwo8bya/1/）

我想点击第一列中的单元格，按此行对其他列进行排序。

如果我点击名称，前一个表格将是：

Name | Jane | John | Toto
Value|  125 | 1256 | 8563
Val2 |   45 |   12 |    3

表的列现在按名称排序（在这种情况下是第一行）。

提前感谢您的帮助

编辑：就像nnnnnn所说的那样，我希望按照第一个列对列进行排序

Answer 1

首先想到的方法是重组表格，以便最终得到一行行，每列一个td;这些列tds中的每一个都将包含一个嵌套表，其中包含该列的数据。这样，实际的排序过程非常简单，因为您只需要对顶级tds进行排序。

复杂的部分是重组。以下是我编写的第一批难以实现的代码。这可能可以整理和优化很多，或者以更聪明的方式完全重写，但我把它作为读者的练习......

$(document).ready(function(){
  var trs = $("table tr");
  var tds = trs.find("td");
  var columnCount = trs.first().children().length;
  var columns = [];
  var sortableTR = $("<tr></tr>");
  for (var i = 0; i < columnCount; i++)
    columns.push([]);

  tds.each(function(i,td) {
    columns[i%columnCount].push($("<tr></tr>").append(td));
  });  
  columns.forEach(function(v) {
    sortableTR.append($("<td></td>").append($("<table></table>").append(v)));
  });
  trs.remove("tr");
  $("table").append(sortableTR);
  sortableTR.children().first().on("click", "tr", function(e) {
    var row = $(this);
    var rowIndex = row.index();
    var dataType = row.find("td").attr("data-type");
    var cols = sortableTR.children().slice(1);
    cols.sort(function(a, b) {
      a = $(a).find("td").eq(rowIndex).text();
      b = $(b).find("td").eq(rowIndex).text();
      if (dataType==="number") {
        a = +a;
        b = +b;
      }
      return a > b ? 1 : a < b ? -1 : 0;
    });
    cols.each(function() { sortableTR.append(this); });
  });
});

table, tr, td { border: none; border-collapse: collapse; }
td { width: 100px; padding: 0px; margin: 0px; }
td td { border: thin grey solid; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table border="1">
<tr><td data-type="string"><b>Name</b></td><td>John</td><td>Jane</td><td>Jack</td></tr>
<tr><td data-type="number"><b>Age</b></td><td>36</td><td>34</td><td>42</td></tr>
<tr><td data-type="number"><b>Weight</b></td><td>111</td><td>56</td><td>82</td></tr>
<tr><td data-type="number"><b>Score</b></td><td>25</td><td>42</td><td>18</td></tr>
</table>

请注意，我在标题单元格中添加了data-type属性，以便排序知道是否将数据视为数字。

在结果表上修复样式是我留给读者的另一件事......

Answer 2

对列进行排序

 // create headings array to sort
 var headings = $('#sortedTable tr:first td:gt(0)').map(function(item){       
       return $(this).text()
  }).get();
  // copy  and sort new array
  var sortedHeadings = headings.slice().sort();
  // create object where old index is key, value is new index
  var indices =  headings.reduce(function(a,c,i){
     a[i]= sortedHeadings.indexOf(c);
     return a;
  },{});
  // iterate rows and sort cells
  $('#sortedTable tr') .each(function(i){
     // sort using index hash object above
     var $cells = $(this).children(':gt(0)').sort(function(a,b){
         return indices[$(a).index()]-indices[$(b).index()]
     });
     // append sorted cells
     $(this).append($cells)
  });

的 DEMO

排序列表而不是行

2 个答案: