从侧面菜单中排序表

时间:2015-02-16 04:14:38

标签: javascript jquery html sorting html-table

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

enter image description here

我知道我们可以使用一些jQuery库对表格进行排序,分页......

但我的要求是从侧面菜单中排序,而不是从表格标题中排序。

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

3 个答案:

答案 0 :(得分:3)

这可能会让你知道如何配对..

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

答案 1 :(得分: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]] );
  }
}

答案 2 :(得分: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>