Question

我想按列的head字段对表进行排序。意味着我想将行保持在相同的位置，但列的顺序应该基于列标题字段（td）进行排序。

例如：

排序前

表：

assign1|assign3|assign2|assign4|
assign1|assign3|assign2|assign4|
assign1|assign3|assign2|assign4|
assign1|assign3|assign2|assign4|
assign1|assign3|assign2|assign4|
assign1|assign3|assign2|assign4|
assign1|assign3|assign2|assign4|

并在排序后

assign1|assign2|assign3|assign4|
assign1|assign2|assign3|assign4|
assign1|assign2|assign3|assign4|
assign1|assign2|assign3|assign4|
assign1|assign2|assign3|assign4|
assign1|assign2|assign3|assign4|
assign1|assign2|assign3|assign4|

@seth 我必须使用标题对列进行排序（更改顺序）。

@CMS 我已经尝试过tablesorter插件和这个插件排序行。表示它按升序或降序更改行的顺序。

但是我的问题不同，我必须按照标题单元格的升序或降序更改列的顺序。

请查看我的相关示例。

Answer 1

好的，这是我掀起的事情。它可能不是最优雅或最干净但它的工作原理。

// sorting function for the headers
function th_sorter(a, b) {
   // just compare the text
   var cmp = $(a).text() > $(b).text();
   if (cmp) {
     return 1;
   }
   else {
     return $(a).text() === $(b).text() ? -1 : 0;
   }
}

var sorted = [], temp=[];
// first sort the 1st row so we can figure out what goes where
$('table tr:first').each(
  function(i, tr) {
      $(tr).children('td').each( function(idx,node) {
        $(node).data('orig', idx);
      }).sort( th_sorter ).each( function(idx, node) {
        sorted.push( { 
            html: $(node).html(), 
            idx: $(node).data('orig') 
          } );
      });
});

// now re-arrange the deck chairs
$('table tr').each( function(i, tr) {
  // double each, once to capture and once to move                                          
  $(tr).children('td').each( function( idx, node) {
    temp[idx] = $(node).html();
  }).each( function(idx,node) {
    $(node).html( temp[ sorted[idx].idx ] );
  });
  temp = [];
});

Demo page

Answer 2

看看这个插件：

jQuery.Tablesorter

jQuery：排序表列而不是行

2 个答案: