从侧面菜单排序表格答案

【问题标题】：Sort table from side menu从侧面菜单排序表格
【发布时间】：2015-04-16 13:13:00
【问题描述】：

这听起来可能很奇怪。我想知道是否可以通过单击侧面菜单链接而不是从表格标题对表格进行排序。

我知道我们可以使用一些 jQuery 库在表格内进行排序、分页...。

但我的要求是从侧面菜单而不是从表头排序。

<table>
  <thead>
    <tr>
     <th>blabla</th>
     <th>blabla</th>
    </tr>
  </thead>
  <tbody>
   <tr>
    <td>blabla</td>
    <td>blabla</td>
   </tr>
 </tbody>
</table>

【问题讨论】：

还没有，我不知道该怎么做

标签： javascript jquery html sorting html-table

【解决方案1】：

你可以使用tablesorter的sorton事件：

$(document).ready(function() {
  $("#mysortable").tablesorter();

  $("#navigator div").click(function() {
    var column = $(this).data("column") - 1;
    $("#mysortable").trigger("sorton", [[[column, 0]]]);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.19.1/js/jquery.tablesorter.min.js">
</script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.19.1/css/theme.default.css"/>

<div id="navigator" style="float:left; max-width:200px;">
  <div data-column="1">Sort Column One</div>
  <div data-column="2">Sort Column Two</div>
  <div data-column="3">Sort Column Three</div>
</div>

<table id="mysortable" class="tablesorter" style="float:right; max-width:400px;">
  <thead>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
      <th>Column 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>A</td>
      <td>2</td>
      <td>Z</td>
    </tr>
    <tr>
      <td>C</td>
      <td>3</td>
      <td>Y</td>
    </tr>
    <tr>
      <td>B</td>
      <td>1</td>
      <td>X</td>
    </tr>
  </tbody>
</table>

【讨论】：

【解决方案2】：

这可能会让你知道如何做队友..

function sortColumn(c,n){
  var rows = $('#mytable tbody  tr').get();

  rows.sort(function(a, b) {

  var A = $(a).children('td').eq(n).text().toUpperCase();
  var B = $(b).children('td').eq(n).text().toUpperCase();

  if(A < B) {
    return -1*c;
  }
  if(A > B) {
    return 1*c;
  }
  return 0;
  });

  $.each(rows, function(index, row) {
    $('#mytable').children('tbody').append(row);
  });
}


 var sln = 1;
$("ul li").click(function(){
    sln *= -1;
    var n = $("ul li").index(this);
    sortColumn(sln,n);
});

小提琴here

【讨论】：

【解决方案3】：

方法如下

function sort_rows(col_num, ascending) {
  var $rows = $('#'+table_id+' tr').not( function(i,e) {
      return $(e).find('th').length > 0;
    } );
  var sort_values = [];
  var indx_values = [];
  $rows.each( function (i,e) {
      sort_values.push( $(e).find('td:nth-child('+col_num+')').text() );
      indx_values.push(sort_values.length-1);
    } );

  var ordering;
  if (ascending) {
    ordering = function (a,b) { return a < b; };
  } else {
    ordering = function (a,b) { return a > b; };
  }

  var k = 0, val = sort_values[0];
  for(var i = sort_values.length-1; i > 0; i-=1) {
    for(var j = i; j >= 0; j-=1) {
      if (ordering(sort_values[j], val))
        val = sort_values[j];
        k = j;
      }
    }
    var temp = sort_values[j];
    sort_values[j] = sort_values[i];
    sort_values[i] = temp;
    var temp = indx_values[j];
    indx_values[j] = sort_values[i];
    indx_values[i] = temp;
  } 

  list_$rows = [];
  $rows.each( function (i,e) { list_rows.push($(e).clone()); } );
  $rows.remove();
  for(var i = 0; i < sort_values.length; i+=1) {
    $('#'+table_id).append( list_$rows[indx_values[i]] );
  }
}

【讨论】：

谢谢，我会试试，让你知道