2012-03-01 15 views
1

私が持っているテーブル:複雑なソートHTMLテーブル

<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>[email protected]</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条件:Eメール=空とウェブサイト= YESと給与=昇順; 次に、2つの条件で文字列に進みます。電子メール - 空ではなく、Webサイト=いいえ、給与=昇順。 その後、文字列 - その他。 JavaScriptでソート(jQueryを使用)。テーブルのすべてのデータは、Spring Controllerから取得します。 Rresult:

name secondname E-mail  Salary   web site 
    Smit2 Jonson2     $20.00     yes 
    Smit  Jonson     $50.00     yes 
    Bah  Frank  [email protected] $40.00     no 
    Bah  Frank  [email protected] $330.00     no 
    Kortni Love      $50.00  
    Dou  jenson     $100.00  

答えて

3

利用データテーブル - 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

あなたの質問に基づいて、あなたはsomethiこのように:

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

これは、メール、Webサイト、給与(ゼロベースの列2,4、および3)です。それが完全ではない場合は、必要に応じて 'desc'を 'asc'に切り替えます。

+0

このプラギンで私の例の条件を設定するには? – Gene

+0

更新を参照してください、それはかなりそうするはずです – shanabus

+0

この解決策はあなたの質問を解決しましたか?そうであれば、受け入れられた回答としてマークしてください – shanabus

関連する問題