復雜的排序html表

Question

我有桌子：

<table id="myTable" class="tablesorter">
  <thead>
  <tr>
    <th>name</th>
    <th>secondname</th>
    <th>E-mail</th>
    <th>Salary</th>
    <th>web site</th> 
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>Smit</td>
    <td>Jonson</td>
    <td></td>
    <td>$50.00</td>
    <td>yes</td>
  </tr>
  <tr>
    <td>Smit2</td>
    <td>Jonson2</td>
    <td></td>
    <td>$20.00</td>
    <td>yes</td>
  </tr>
  <tr>
    <td>Bah</td>
    <td>Frank</td>
    <td>fbach@yahoo.com</td>
    <td>$40.00</td>
    <td>no</td>
  </tr>
  <tr>
    <td>Dou</td>
    <td>jenson</td>
    <td></td>
    <td>$100.00</td>
    <td></td>
  </tr>
  <tr>
    <td>Kortni</td>
    <td>Love</td>
    <td></td>
    <td>$50.00</td>
    <td></td>
  </tr>
  </tbody>
</table>

如何同時對我的表進行排序，這將同時滿足以下三個條件：1個條件：電子郵件=空，網站=是，工資=升序； 然后轉到2個條件的字符串：電子郵件 - 不為空，網站=否和薪水=升序; 然后是字符串 - 其他。 用JavaScript排序（使用jQuery）。 表的所​​有數據都來自Spring Controller。 Rresult：

 name   secondname  E-mail       Salary           web site
   Smit2    Jonson2                  $20.00                  yes   
   Smit     Jonson                   $50.00                  yes
    Bah     Frank      fbach@yahoo.com   $40.00                   no
    Bah     Frank      fbach@yahoo.com   $330.00                  no
    Kortni  Love                     $50.00     
    Dou     jenson                   $100.00    

Answer 1

使用數據表 - http://datatables.net/

它是jQuery的一個很棒的插件，這是一個如何進行多列排序的很好的例子 - http://datatables.net/release-datatables/examples/basic_init/multi_col_sort.html

/* Define two custom functions (asc and desc) for string sorting */
jQuery.fn.dataTableExt.oSort['string-case-asc']  = function(x,y) {
    return ((x < y) ? -1 : ((x > y) ?  1 : 0));
};

jQuery.fn.dataTableExt.oSort['string-case-desc'] = function(x,y) {
    return ((x < y) ?  1 : ((x > y) ? -1 : 0));
};

$(document).ready(function() {
    /* Build the DataTable with third column using our custom sort functions */
    $('#example').dataTable( {
        "aaSorting": [ [0,'asc'], [1,'asc'] ],
        "aoColumns": [
            null,
            null,
            { "sType": 'string-case' },
            null,
            null
        ]
    } );
} );

UPDATE

根據您的問題，您將尋找這樣的東西：

...
    "aaSorting": [ [2,'asc'], [4,'asc'], [3, 'asc' ],
...

這是電子郵件，網站，薪水（從零開始的第2、4和3列）。 如果這樣做不完美，請在需要的地方為'desc'切換'asc'。