从侧面菜单中排序 table

Question

这听起来可能很奇怪。我想知道是否可以通过单击侧面菜单 link 而不是 table header.

来对 table 进行排序

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

但我的要求是从侧边菜单排序，而不是从 table header。

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

Answer 1

方法如下

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

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

Fiddle here

Answer 3

您可以使用 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>

从侧面菜单中排序 table

Sort table from side menu

html

javascript

sorting

jquery

html-table