用兩列對HTML表格數據進行排序

Question

Vector VectorMode   VectorBaseDate 
5  4      2012-06-16 
5  3      2013-06-16 
5  2      2012-06-16 
5  1      2012-06-16 
5  1      2013-06-16 
5  2      2013-06-16 
5  3      2012-06-16 
5  4      2013-06-16 

這是我通過用jquery ajax調用讀取一些xml文件而創建的html表格。首先，我想按日期排序，然後按模式排序。所以結果應該看起來像。

Vector VectorMode   VectorBaseDate 
5  1      2012-06-16 
5  2      2012-06-16 
5  3      2012-06-16 
5  4      2012-06-16 
5  1      2013-06-16 
5  2      2013-06-16 
5  3      2013-06-16 
5  4      2013-06-16 

我試過桌面分揀機插件，但沒有運氣。

$("table").tablesorter(); 
     $.ajax({ 
     type: "GET", 
     url: "vector.xml", 
     dataType: "xml", 
     success: function(xml) { 
          $('#showVelocity').append('<table cellspacing="1" id="myTable" class="tablesorter">'); 
          $('#showVelocity').append('<thead><tr><th>VectorType</th><th>VectorMode</th><th>InitialValue</th><th>VectorBaseDate</th></tr></thead>'); 
          $('#showVelocity').append('<tbody>'); 
          $(xml).find('Vector').each(function() { 
          var intialVal = $(this).find('InitialValue').text(); 
          var vectorBaseDate = $(this).find('VectorBaseDate').text(); 
          var attrValType = $(this).find('VectorType').attr('tc'); 
          var attrValMode = $(this).find('VectorMode').attr('tc'); 
          if (attrValType=='5') { 
           //$('#someElement').append(intialVal+'<br/>'); 
           var tr = '<tr><td>'+attrValType+'</td><td>'+attrValMode+'</td><td>'+intialVal+'</td><td>'+vectorBaseDate+'</td></tr>'; 
           $('#showVelocity').append(tr); 
          }; 

          $('#showVelocity').append('</tbody></table>'); 
          $("table").trigger("update"); 
          var sorting = [[1,0],[3,0]]; 
          $("table").trigger("sorton",[sorting]); 
         }); 
       } 
      }); 

Answer 1

首先從阿賈克斯的結果（數據）創建一個整理和使用Array.Sort功能基於一個特定的值進行排序，並創建一個表標籤。看看這篇文章 Sorting Select Option in Javascript - Based on multiple values in same row

Answer 2

沒有看到你的代碼，這是有點難以告訴你做錯了什麼，但我寫了一個小提琴，做你想做的。

如果您發佈了更多的代碼，我可以對其進行修改以滿足您的需求。

下面的代碼：

<table class="tablesorter"> 
    <thead> 
     <tr> 
      <th>Vector</th> 
      <th>VectorMode</th> 
      <th>VectorBaseDate</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td>5</td> 
      <td>1</td> 
      <td>2012-06-16</td> 
     </tr> 
     <tr> 
      <td>5</td> 
      <td>2</td> 
      <td>2012-06-16</td> 
     </tr> 
     <tr> 
      <td>5</td> 
      <td>3</td> 
      <td>2012-06-16</td> 
     </tr> 

    </tbody> 
</table> 

和JS

$('table').tablesorter({ 
     // *** Appearance *** 
     // fix the column widths 
     widthFixed : true, 
     // include zebra and any other widgets, options: 
     // 'uitheme', 'filter', 'stickyHeaders' & 'resizable' 
     // the 'columns' widget will require custom css for the 
     // primary, secondary and tertiary columns 
     widgets : [ 'uitheme', 'zebra' ], 

     // *** Functionality *** 
     // starting sort direction "asc" or "desc" 
     sortInitialOrder : "asc", 


     // jQuery selectors used to find the header cells. 
     selectorHeaders : 'thead th', 

     // *** css classes to use *** 
     cssAsc  : "headerSortUp", 
     cssChildRow : "expand-child", 
     cssDesc  : "headerSortDown", 
     cssHeader  : "header", 
     tableClass : 'tablesorter', 


     // pick rows colors to match ui theme 
     widgetZebra: { css: ["ui-widget-content", "ui-state-default"] }, 

     // *** prevent text selection in header *** 
     cancelSelection : true, 

     // *** send messages to console *** 
     debug : false 
    }); 

Fiddle