javascript - 复杂排序html表

Question

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

如何对同时满足三个条件的表进行排序:1 条件:电子邮件 = 空，网站 = 是，薪水 = 升序；然后使用 2 个条件进行字符串处理:电子邮件 - 非空且网站 = 否且薪水 = 升序；然后是字符串 - 其他。使用 JavaScript 排序(使用 jQuery)。表格的所有数据均来自 Spring Controller。结果:

 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
        ]
    } );
} );

更新

根据你的问题，你会寻找这样的东西:

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

这是电子邮件、网站、薪水(从零开始的第 2、4 和 3 列)。如果这样做不完美，请在需要时将“asc”换成“desc”。