复杂的排序html表

Question

I have table:

<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>

How sort my table that would simultaneously three conditions: 1 condition: E-mail = empty and web site = yes and Salary = ascending; Then go string with 2 condition: E-mail - not empty and web site = no and Salary = ascending; Then strings - other. Sort with JavaScript(use jQuery). All data for table come from 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

Use data tables - http://datatables.net/

Its a great plugin for jQuery and here is a great example of how to do multi-column sorting - 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

Based on your question, you would look for something like this:

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

Which is Email, Web Site, Salary (zero-based column 2, 4, and 3). If that doesn't do it perfectly, switch out 'asc' for 'desc' where needed.