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

<强>更新

根据您的问题，您会找到类似的内容：

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

哪个是电子邮件，网站，工资（从零开始的第2,4和3列）。如果没有完美地完成，请在需要的地方为'desc'切换'asc'。

复杂的排序html表

1 个答案: